ReactNative 封装按钮

1. 首先创建一个ButtonView.js

编写button 并设置样式

  <View style = {styles.container}>
        <TouchableHighlight
            style={[styles.btnDefaultStyle,this.props.btnStyle,styles.center]}
            activeOpacity={0.5}
            underlayColor={this.props.underlayColor}
            onPress={this.props.onPress}>

            <Text style={[this.props.TextStyle,styles.textDefaultStyle]}>{this.props.btnName}</Text>

        </TouchableHighlight>
    </View>
const styles = StyleSheet.create({
   container: {
      flexDirection:'row',
      justifyContent: 'center',
      alignItems: 'center',
  },
  center:{
      justifyContent:'center',
      alignItems:'center',
  },
  btnDefaultStyle:{
      height:30,
      width:100,
      backgroundColor: '#ff8447',
      borderColor: '#ff8447',
      borderRadius: 5,
  },
  textDefaultStyle:{
     color:'#ffffff',
      fontSize:15,
  },
});

TouchableHighlight 中样式 styles.btnDefaultStyle 标示默认样式 this.props.btnStyle 标示对外抛出的属性接口可以从外面修改

下面属性可以不写

 /*个属性
  *  btnName 按钮名称
  * textStyle 文本样式
  * btnStyle 按钮样式
  * underlayColor 点击后颜色
  * */
// static propTypes = {
//     btnName: PropTypes.string,
//     textStyle: Text.propTypes.style,
//     btnStyle: TouchableHighlight.propTypes.style,
//     underlayColor: TouchableHighlight.propTypes.underlayColor,
// }

给按钮默认值

 static defaultProps = {
    btnName: 'Button',
    underlayColor: 'gray',
};

2.从外面调用组件

<View style = {styles.container}>
      <ButtonView
        btnName='点击一下'
        btnStyle = {{width:200,height:30,backgroundColor:'red'}}
        onPress = {this._renderContent}
       ></ButtonView>
 </View>