自定义Button
import React, { Component } from 'react';
import {
StyleSheet,
View,
Dimensions,
TouchableOpacity,
TouchableHighlight
} from 'react-native';
import Text from '../text';
//模块声名并导出
export default class Button extends Component {
//属性声名
static propTypes = {
txtStyle:React.PropTypes.any, // 文字颜色
underlayColor:React.PropTypes.string, // 点击的时候按钮背景颜色
underlayTxtColor:React.PropTypes.string, // 点击的时候文字颜色
onPress: React.PropTypes.func, // 点击事件
onPressOut: React.PropTypes.func, // 结束点击的时候触发事件
onLongPress: React.PropTypes.func, // 长按事件
imageView: React.PropTypes.element, // 图片
};
//默认属性
static defaultProps = {
underlayColor: '#00000000',
underlayTxtColor: '#00000088',
txtStyle: { color: '#000000' },
imageView: null,
disabled: false
}
//构造函数
constructor(props) {
super(props);
// console.log(this.props);
this.state = { //状态机变量声明
showButtonTxt: true,
onShowUnderlay: false
}
}
onShowUnderlay = () => {
// alert('_onShowUnderlay');
this.setState({ onShowUnderlay: true });
}
onHideUnderlay = () => {
// alert('_onHideUnderlay');
this.setState({ onShowUnderlay: false });
}
//渲染
render() {
return (
<TouchableHighlight
onShowUnderlay={this.onShowUnderlay}
onHideUnderlay={this.onHideUnderlay}
underlayColor={this.props.underlayColor}
onPress={this.props.onPress}
onLongPress={this.props.onLongPress}
onPressOut={this.props.onPressOut}
style={[styles.button, this.props.style]}
disabled={this.props.disabled}
>
{this.state.showButtonTxt
//样式继承,带条件样式
? <View style={{ flexDirection: 'row',justifyContent:'center',alignItems:'center',paddingLeft:5,paddingRight:5 }}>
{this.props.imageView ? <View style={{ marginRight: 5 }}>{this.props.imageView}</View> : null}
<Text
style={[styles.txt, this.props.txtStyle, this.state.onShowUnderlay && {color: this.props.underlayTxtColor}]}>
{//显示成员变量
this.props.children}
</Text>
</View>
: null}
</TouchableHighlight>
);
}
};
const styles = StyleSheet.create({
button: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
txt: {
textAlign: 'center',
}
})
调用组件
<Button
underlayColor={Constant.colorTxtPrimary}
underlayTxtColor='#FFFFFF'
txtStyle={{color: '#FFFFFF', fontSize: 18, textAlign: 'center'}}
style={{height: 40, width: width - 80, padding: 0, backgroundColor: 'pink',borderRadius: 4, marginTop: 25}}
onPress={() => this.loginBtnClick()}>
登录
</Button>