最近終于沒(méi)有太多需求了,大概開(kāi)發(fā)了React-Native半年的樣子,現(xiàn)在公司的兩個(gè)項(xiàng)目,一個(gè)是原生轉(zhuǎn)成純RN,一個(gè)是從RN就開(kāi)始開(kāi)發(fā)的,由于自己之前是做iOS原生開(kāi)發(fā)的,來(lái)到現(xiàn)在的公司開(kāi)始做混合開(kāi)發(fā),目前兩個(gè)項(xiàng)目均已上架迭代了幾版,想著寫點(diǎn)東西,留下點(diǎn)什么赞赖。
好了经瓷，話不多說(shuō)，開(kāi)發(fā)了2年多了案站，第一次寫簡(jiǎn)書，先來(lái)個(gè)簡(jiǎn)單的兢哭，今天要寫的就是一個(gè)登錄的自定義按鈕诅挑。為什么先寫這個(gè)呢，因?yàn)橹绊?xiàng)目的登錄按鈕是用的TouchableOpacity甲棍，并沒(méi)有做點(diǎn)擊判斷简识，導(dǎo)致可以點(diǎn)擊多次，發(fā)出多次請(qǐng)求感猛，后來(lái)就封裝了一下七扰。
1.先看看效果圖，如下
登錄按鈕
2.實(shí)現(xiàn)原理
(1) 這個(gè)自定義的button按下之后是不可點(diǎn)擊的狀態(tài),下面是render代碼,使用TouchableOpacity封裝,如果正在加載和不可用狀態(tài),返回的只是一個(gè)單純的View,也就實(shí)現(xiàn)了不可點(diǎn)擊的需求
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)實(shí)現(xiàn)內(nèi)部文字,和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>
)
}
}
這一段就很簡(jiǎn)單了,屬性isLoading是true的時(shí)候就加載ActivityIndicator,否則就加載Text
最后,附上完整DemoCustomButtonDemo陪白，后面慢慢會(huì)有更多的RN文章
