React-Native 自定义登录button按钮

最近终于没有太多需求了,大概开发了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(
  
);

(2)实现内部文字,和loading视图,代码如下

_renderInnerView(){
        if (this.props.isLoading) {
            return(
                
            )
        }else {
            return (
                
                    {this.props.labelText}
                
            )
        }
    }

这一段就很简单了,属性isLoading是true的时候就加载ActivityIndicator,否则就加载Text

最后,附上完整DemoCustomButtonDemo，后面慢慢会有更多的RN文章