反应原生按钮中的阴影 [英] Shadow in button in react native

问题描述

我想在没有边框和展开的本机反应中实现带阴影的按钮，我尝试过这样的事情，

I wanna achieve button with shadow in react native with no border and spread, I have tried something like this,

{
shadowColor: 'black',
shadowOpacity: 0.8,
elevation: 6,
backgroundColor : "#0000",
shadowRadius: 15 ,
shadowOffset : { width: 56, height: 13},
borderWidth:0,
borderRadius:0,
}

但是阴影没有扩散，偏移也没有按预期工作.我想实现这样的目标，

But the shadow is not spreading and offset is not also working as expected. I want to achieve something like this,

Codepen

推荐答案

尝试将其直接添加到 Button 上，但没有成功.您可以通过使用 TouchableOpacity 来尝试这种方式.

Tried adding it directly on Button but no luck. You can try this way by using TouchableOpacity.

import React, { Component } from 'react';
import { View, StyleSheet, Button, TouchableOpacity } from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity style={styles.button}>
          <Button title="Submit" />
        </TouchableOpacity>

        <TouchableOpacity style={styles.buttonHover}>
          <Button title="Submit" />
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
  },
  button: {
    borderRadius:25,
    paddingTop: 5,
    paddingBottom: 5,
    paddingLeft: 50,
    paddingRight: 50,
    backgroundColor: '#FFFFFF',
    shadowColor: 'rgba(0, 0, 0, 0.1)',
    shadowOpacity: 0.8,
    elevation: 6,
    shadowRadius: 15 ,
    shadowOffset : { width: 1, height: 13},
  },
  buttonHover: {
    marginTop: 10,
    borderRadius:25,
    paddingTop: 5,
    paddingBottom: 5,
    paddingLeft: 50,
    paddingRight: 50,
    shadowColor: 'rgba(46, 229, 157, 0.4)',
    shadowOpacity: 1.5,
    elevation: 8,
    shadowRadius: 20 ,
    shadowOffset : { width: 1, height: 13},
    backgroundColor: '#2EE59D',
    color: '#FFFFFF'
  }
});

这篇关于反应原生按钮中的阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！