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>