React Native按钮的实现

在React Native中没有专门的按钮组件,所以在React Native中是借助Touchablexxx组件包裹我们的视图来响应用户的点击事件,另外Touchable组件，都是在根节点只支持一个组件，如果你需要多个组件同时相应单击事件，可以用一个View将它们包裹着.
#.TouchableWithoutFeedback：
该组件响应点击事件，不显示任何视觉反馈。常用的属性有:
1. onPress function
当触摸操作结束时调用,onPress是最常用的属性之一.
2. onLongPress function
当用户长时间按压组件(长按效果)的时候调用该方法。onLongPress是常用的属性之一，通常用于响应长按的事件，可用于长按弹出删除对话框等。

  render (){      return (          <View style = {{backgroundColor:'blue',marginTop:50,height:200,padding:2}}>                <TouchableWithoutFeedback                     onPress={()=>{                        this.setState({mount:this.state.mount+1});                      }}                    onLongPress={()=>{                        this.setState({longmount:this.state.longmount+1});                        Alert.alert('提示','确认删除吗?',[{text:'确认',onPress:()=>console.log('quereng')},{text:'取消',onPress:()=>console.log('quereng'),style:'cancel'}]);                    }}                    >                    <View style ={{backgroundColor:'red',width:500,height:60}}>                    <Text style={{fontSize:20,}}>点击TouchableWithoutFeedback</Text>                    </View>                </TouchableWithoutFeedback>                <View style ={{backgroundColor:'red',width:500,height:60,marginTop:20,alignItems:'center'}}>                <Text style={{fontSize:20,justifyContent:'center'}}>点击了{this.state.mount}次</Text>                </View>                <View style ={{backgroundColor:'red',width:500,height:60,marginTop:20,alignItems:'center'}}>                <Text style={{fontSize:20,justifyContent:'center'}}>长安了{this.state.longmount}次</Text>                </View>          </View>        )    }}输出:点击调用onPress ,输出点击了X次,长按时弹出提示框,输出长按了X次

注意：当我们没有对Touchable组件设置onLongPress属性而设置了onPress属性的时候，我们长按按钮之后会回调onPress方法。另外，我们也可以通过delayLongPress 方法来这设置从onPressIn被回调开始，到onLongPress被调用的延迟。
3. disabled bool
如果设为true，则禁止此组件的一切交互。通常用于禁止按钮响应点击事件,比如防止按钮被多次频繁点击

render (){      return (          <View style = {{backgroundColor:'blue',marginTop:50,height:200,padding:2}}>              <TouchableWithoutFeedback                   disabled = {this.state.ok}                  onPress={()=>{                   this.setState({text:'正在登录...........',ok:true});                   setTimeout(()=>{                       this.setState({text:'重新登录.........',ok:false});                   },2000);                  }}                  >                  <View>                  <Text style= {{fontSize:20,width:500,height:80,marginTop:10,backgroundColor:'gray'}}>登录</Text>                  </View>              </TouchableWithoutFeedback>              <Text style= {{fontSize:20,width:500,height:80,marginTop:10,backgroundColor:'yellow'}}>可点击登录按钮吗?{this.state.ok?'不可以':'可以'} 状态是:  {this.state.text}</Text>          </View>        )    }当点击登录时,状态变为正在登录 不可以点击登录按钮,2s后自动设为重新登录,可以点击登录按钮,disabled起到了正在登录过程中,使得登录按钮不响应点击事件的作用

注意：通过设置Touchable的accessible 属性为false是达不到禁用按钮的效果，这也是因为accessible为false的情况下，Touchable组件还是可以响应交互事件的，要想禁用Touchable的交互事件，只能通过disabled属性。
4 onPressIn function与onPressOut function
这两个方法分别是当用户开始点击按钮时与点击结束后被回调。通过这两个方法可计算出用户单击按钮所用的时长

      return (          <View style = {{backgroundColor:'blue',marginTop:50,height:200,padding:2}}>             <TouchableWithoutFeedback                    onPressIn={()=>{                      this.setState({text:'计时开始...........',startTime:new Date().getTime()});                   }}                   onPressOut={()=>{                       this.setState({text:'计时结束........总时间是'+(new Date().getTime()-this.state.startTime)});                   }}                 >                    <View>                       <Text style= {{fontSize:20,width:500,height:80,marginTop:10,backgroundColor:'gray'}}>点击计时</Text>                   </View>             </TouchableWithoutFeedback>             <Text style={{fontSize:30,backgroundColor:'red',marginTop:10,flex:1}}>{this.state.text}</Text>          </View>        )    }点击计时时: 显示计时开始...........,松开时 显示计时结束..........总时间是941,该差值就是单击按钮的时间

另外也可以通过delayPressIn与delayPressOut两个方法来分别设置，从点击按钮到onPressIn 被回调的延时与从点击结束到onPressOut 被回调时的延时。

# TouchableHighlight：当按下时背景会变暗的效果。是在TouchableWithoutFeedback 的基础上添加了一些UI上的扩展，既当手指按下的时候，该视图的不透明度会降低，同时会看到相应的颜色(视图变暗或者变亮)，从TouchableHighlight 的源码中我们可以看出，其实这个颜色就是在TouchableHighlight 的最外层个添加了一个View，通过改变这个View的背景色及透明度来达到这一效果。其包含的属性有如下:
1 activeOpacity number
通过activeOpacity来设置TouchableHighlight 被按下时的不透明度，从TouchableHighlight 的源码中可以看出，它的默认不透明度为0.85，我们可以根据需要进行调节。
2 underlayColor color
通过underlayColor 属性来设置TouchableHighlight 被按下去的颜色，默认状态下为balck黑色
3 onHideUnderlay function
当衬底(也就是上文讲到的最外层的View)被隐藏的时候调用。结束点击时衬底会被隐藏
4 onShowUnderlay function
当衬底(也就是上文讲到的最外层的View)显示的时候调用。开始点击时衬底会显示
5 style View#style
因为TouchableHighlight 的最外层个添加了一个View，所以我们可以设置这个View的样式来做出一个形形色色的按钮。

  render (){      return (          <View style = {{marginTop:50,height:200,padding:2}}>            <TouchableHighlight                 style ={styles.button} //按照该样式显示按钮                activeOpacity={0.1}    //透明度为0.1                underlayColor='green' //点击的时候,背景为绿色                onShowUnderlay={()=>{ //当点击下去时,会调用                    this.setState({text:'显示衬底'})                 }}                 onHideUnderlay={()=>{ //当点击结束时,会调用                    this.setState({text:'隐藏衬底'})                }}                onPress={()=>{}}                >                    <View>                    <Text style={{fontSize:30}}>TouchableHighlight</Text>                    </View>            </TouchableHighlight>           <Text style={{fontSize:30,marginTop:10,flex:1}}>{this.state.text}</Text>          </View>        )    }}

#. TouchableOpacity：按下时降低按钮的透明度，而不会改变背景的颜色。它也是在TouchableWithoutFeedback的基础上添加了一些UI上的扩展，但这些扩展相比TouchableHighlight 少了一个额外的颜色变化。它是通过在按下去改变视图的不透明度来表示按钮被点击的。在扩展属性方面TouchableOpacity相比TouchableHighlight，就少了很多，只有一个activeOpacity，来设置按下去的透明度。
1 activeOpacity number 同，TouchableHighlight 的activeOpacity。

          <TouchableOpacity            activeOpacity={0.7} //点击的时候,TouchableOpacity字体会发生0.7的透明度           >                 <View>                <Text style={{fontSize:30}}>TouchableOpacity</Text>                </View>           </TouchableOpacity>

另外我们也可以通过TouchableOpacity的setOpacityTo(value, duration)方法来动态修改TouchableOpacity被按下去的不透明度。
#. TouchableNativeFeedback：当按下时形成类似水波纹的视觉效果。注意，此组件只支持Android。TouchableNativeFeedback 在TouchableWithoutFeedback 所支持的属性的基础上增加了按下去的水波纹效果。我们可以通过background 属性来自定义原生触摸操作反馈的背景。
TouchableNativeFeedback所扩展出来的属性
1 background backgroundPropType 设置背景类型。它接受一个有着type属性和一些基于type属性的额外数据的对象。推荐使用以下的静态方法之一来创建这个对象：

1) TouchableNativeFeedback.SelectableBackground() - 会创建一个对象，表示安卓主题默认的对于被选中对象的背景。(?android:attr/selectableItemBackground)

2) TouchableNativeFeedback.SelectableBackgroundBorderless() - 会创建一个对象，表示安卓主题默认的对于被选中的无边框对象的背景。(?android:attr/selectableItemBackgroundBorderless)。只在Android API level 21+适用。

3) TouchableNativeFeedback.Ripple(color, borderless) - 会创建一个对象，当按钮被按下时产生一个涟漪状的背景，你可以通过color参数来指定颜色，如果参数borderless是true，那么涟漪还会渲染到视图的范围之外。（参见原生的actionbar buttons作为该效果的一个例子）。这个背景类型只在Android API level 21+适用也就是Android5.0或以上设备。

  render(){   <View>          <TouchableNativeFeedback               onPress={()=>{                   this.setState({mount:this.state.mount+1});               }}              background={ TouchableNativeFeedback.Ripple('red', false)}              >                    <View>                    <Text style={{fontSize:30}}>点击TouchableOpacity</Text>                    </View>          </TouchableNativeFeedback>           <Text style={{fontSize:30}}>TouchableOpacity点击了{this.state.mount}次</Text>     </View>  }

注意:后三者TouchableNativeFeedback,TouchableHighlight,TouchableOpacity都是TouchableWithoutFeedback组件的扩展.