时间戳

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

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

问题描述

自定义按钮类 import React, {Component} from 'react'; 从 'react-native' 导入 {Platform, StyleSheet, Text, View, Button,TouchableOpacity};

导出默认类 FlatButton 扩展组件 { state={ backgroundColor : '#f01d71', backgroundColor2: '#f01d71', 按下: false, };

changeColor(){ if(!this.state.pressed){ this.setState({ press: true,backgroundColor: 'rgb(60,32,140)', backgroundColor2: '#f01d71'}); } else { this.setState({ 按下: false,backgroundColor: '#f01d71', backgroundColor2: '#f01d71'}); } } render() { return ( <View style={{

      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 styles = StyleSheet.create({ text:{ color:'white' }, buttonText: { color : 'white', fontWeight : 'bold', fontSize : 16, justifyContent: 'center', }, });

我正在渲染的第二个组件 import React , {useState, useEffect} from 'react'; 从'react-native'导入{Text，View，StyleSheet，Button，Dimensions}；从 '../shared/FlatButton' 导入 FlatButton const CustomizationView=()=>{ return( 

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

};

const styles=StyleSheet.create({ container : { flex :1, // borderWidth : 5, // borderColor : 'black', paddingHorizo​​ntal : 10,

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

});

导出默认的CustomizationView；

输出 是这个

标签： react-native

解决方案

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

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

推荐阅读