在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组件的扩展.