ReactNative 封装按钮

1. 首先创建一个ButtonView.js

编写button 并设置样式

  
        

            {this.props.btnName}

        
    
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.从外面调用组件