我正在尝试使用本机反应在按钮上实现阴影效果但没有工作任何人可以帮助我吗？答案

【问题标题】：I am trying to implement shadow effect on button using react native but did not work can any one help me?我正在尝试使用本机反应在按钮上实现阴影效果但没有工作任何人可以帮助我吗？
【发布时间】：2021-06-13 14:10:23
【问题描述】：

自定义按钮类 从“反应”导入反应，{组件}；从 'react-native' 导入 {Platform, StyleSheet, Text, View, Button,TouchableOpacity};

导出默认类 FlatButton 扩展组件 { 状态={ 背景颜色：'#f01d71', backgroundColor2: '#f01d71', 按下：假， };

改变颜色（）{ 如果（！this.state.pressed）{ this.setState({pressed: true,backgroundColor: 'rgb(60,32,140)', backgroundColor2: '#f01d71'}); } 别的 { this.setState({ 按下: false,backgroundColor: '#f01d71', backgroundColor2: '#f01d71'}); } } 使成为（） { 返回（

      justifyContent: 'center',
      alignItems: 'center',
     
      }}>
      <TouchableOpacity
    style={{
    backgroundColor:this.state.backgroundColor, 
    borderRadius: 10,
    padding: 10,
    shadowColor: '#000000',
    shadowOffset: {
      width: 0,
      height: 3
    },
    shadowRadius: 5,
    shadowOpacity: 1.0
    }}
          onPress={()=>this.changeColor()}
            >
        <Text style={styles.buttonText}>{this.props.text}</Text>
      </TouchableOpacity>
  </View>
);

} }

const 样式 = StyleSheet.create({ 文本：{ 白颜色' }, 按钮文本：{ 白颜色'， fontWeight : '粗体', 字体大小：16， justifyContent: '中心', }, });

我要渲染的第二个组件 从'react'导入反应，{useState，useEffect}；从'react-native'导入{Text，View，StyleSheet，Button，Dimensions}；从 '../shared/FlatButton' 导入 FlatButton const CustomizationView=()=>{ 返回（

        </View>
        <View style= {styles.btnflex}>
             <FlatButton text="Crop" />
            <FlatButton text="Crop" />
            <FlatButton text="Crop" />
        </View>
       
    </View>
);

};

const 样式=StyleSheet.create({ 容器： { 弹性：1， //边框宽度：5， //边框颜色：'黑色'， paddingHorizontal : 10,

},
btnflex : {
     flexDirection :'row',
     marginTop: 5,
       padding : 5,
     justifyContent : 'space-between',
     borderWidth : 5,
    borderColor : 'red'
},

});

导出默认CustomizationView；

输出是 out put is this

【问题讨论】：

标签： react-native

【解决方案1】：

在 react-native 中，shadowColor、shadowOffset、shadowOpacity 和 shadowRadius 属性用于 iOS 中的阴影。而在 android 中，您只需要传递海拔属性。确保添加背景颜色。这是一个例子：

shadowColor: "#000",
shadowOffset: {
    width: 0,
    height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,

elevation: 5,

【讨论】：

【解决方案2】：

除了上面提供的答案之外，我通常发现使用阴影生成器是一种为 android 和 ios 获得所需结果的简单方法

https://ethercreative.github.io/react-native-shadow-generator/

【讨论】：

【解决方案3】：

请试试这个包。您可以添加不同类型的阴影并创建令人惊叹的 UI。

react-native-neomorph-shadows

这是一个例子 link

link 到图书馆

【讨论】：

【解决方案4】：

你必须通过属性：

backgroundColor: 'some color here'

如果不通过阴影将无法正常工作。

在你的 TouchableOpacity 样式上试试这个：

style={{
    backgroundColor: this.state.backgroundColor || '#fff', 
    borderRadius: 10,
    padding: 10,
    shadowColor: '#000000',
    shadowOffset: {
      width: 0,
      height: 3
    },
    shadowRadius: 5,
    shadowOpacity: 1.0
    }}

当你使用 ||如果您不传递参数 this.state.backgroundColor，按钮的背景将始终为白色，就像您在调用组件时所做的那样。

 <FlatButton text="Crop" />

【讨论】：

在android中添加阴影的唯一方法是海拔。
是的，当然，但如果你不传递背景颜色，它就不起作用

【解决方案5】：

也使用海拔属性

        <View style={{

            justifyContent: 'center',
            alignItems: 'center',
            padding:5
            }}>
            <TouchableOpacity
            style={{
            backgroundColor:'#ff0000', 
            borderRadius: 10,
            padding: 10,
            shadowColor: '#000000',
            shadowOffset: {
            width: 0,
            height: 3
            },
            shadowRadius: 10,
            shadowOpacity: 1.0,
            elevation: 5,
            }}>
              <Text style={styles.buttonText}>{"new button"}</Text>
            </TouchableOpacity>
          </View>

【讨论】：