最近终于没有太多需求了,大概开发了React-Native半年的样子,现在公司的两个项目,一个是原生转成纯RN,一个是从RN就开始开发的,由于自己之前是做iOS原生开发的,来到现在的公司开始做混合开发,目前两个项目均已上架迭代了几版,想着写点东西,留下点什么。
好了,话不多说,开发了2年多了,第一次写简书,先来个简单的,今天要写的就是一个登录的自定义按钮。为什么先写这个呢,因为之前项目的登录按钮是用的TouchableOpacity,并没有做点击判断,导致可以点击多次,发出多次请求,后来就封装了一下。
1.先看看效果图,如下
登录按钮
2.实现原理
(1) 这个自定义的button按下之后是不可点击的状态,下面是render代码,使用TouchableOpacity封装,如果正在加载和不可用状态,返回的只是一个单纯的View,也就实现了不可点击的需求
render(){
if (this.props.isDisabled === true || this.props.isLoading === true) {
return({this._renderInnerView()})
}
let touchableProps = {
accessibilityLabel: this.props.accessibilityLabel,
onPress: this.props.onPress,
onPressIn: this.props.onPressIn,
onPressOut: this.props.onPressOut,
onLongPress: this.props.onLongPress,
activeOpacity: this.props.activeOpacity,
delayLongPress: this.props.delayLongPress,
delayPressIn: this.props.delayPressIn,
delayPressOut: this.props.delayPressOut,
};
return(
<TouchableOpacity {...touchableProps}
style = {[styles.button,this.props.style
{this._renderInnerView()}
</TouchableOpacity>
);
(2)实现内部文字,和loading视图,代码如下
_renderInnerView(){
if (this.props.isLoading) {
return(
<ActivityIndicator
animating={true}
size='small'
style={styles.spinner}
color={this.props.activityIndicatorColor || 'white'}
/>
)
}else {
return (
<Text
style={[styles.textButton, this.props.textStyle]}
allowFontScaling={this.props.allowFontScaling}>
{this.props.labelText}
</Text>
)
}
}
这一段就很简单了,属性isLoading是true的时候就加载ActivityIndicator,否则就加载Text
最后,附上完整DemoCustomButtonDemo,后面慢慢会有更多的RN文章