React Native按钮Touchable系列组件使用教程示例
一、前言
在做RN App开发过程中离不了用户交互，在React Native中没有专门的按钮组件。
为了让视图能够响应用户的点击事件，需要借助Touchablexxx组件来包裹视图。为什么说是Touchablexxx呢，因为它不只是一个组件，而是一组组件，以下四个组件都可以用来包裹视图来响应用户的点击事件。
- TouchableWithoutFeedback：响应用户的点击事件，如果你想在处理点击事件的同时不显示任何视觉反馈，使用它是个不错的选择。
- TouchableHighlight：在TouchableWithoutFeedback的基础上添加了当按下时背景会变暗的效果。
- TouchableOpacity：相比TouchableHighlight在按下去会使背景变暗的效果，TouchableOpacity会在用户手指按下时降低按钮的透明度，而不会改变背景的颜色。
- TouchableNativeFeedback：在Android上还可以使用TouchableNativeFeedback，它会在用户手指按下时形成类似水波纹的视觉效果。注意，此组件只支持Android。
以上四个组件，其中TouchableHighlight、TouchableOpacity以及TouchableNativeFeedback都是在TouchableWithoutFeedback的基础上做了一些扩展，我们从它们的源码中可以看出：
TouchableHighlight：
var TouchableHighlight = React.createClass({
propTypes: {
...TouchableWithoutFeedback.propTypes,
TouchableOpacity：
var TouchableOpacity = React.createClass({
mixins: [TimerMixin, Touchable.Mixin, NativeMethodsMixin],
propTypes: {
...TouchableWithoutFeedback.propTypes,TouchableNativeFeedback:
var TouchableNativeFeedback = React.createClass({
propTypes: {
...TouchableWithoutFeedback.propTypes,
因为TouchableWithoutFeedback有其它三个组件的共同属性，所以我们先来了解一下TouchableWithoutFeedback。
二、TouchableWithoutFeedback 使用详解
TouchableWithoutFeedback，Touchable系列组件中最基本的一个组件，只响应用户的点击事件不会做任何UI上的改变，在使用的过程中需要特别留意。
注意：无论是TouchableWithoutFeedback还是其他三种Touchable组件，在根节点都是只支持一个组件，如果你需要多个组件同时相应单击事件，可以用一个View将它们包裹着，它的这种根节点只支持一个组件的特性和ScrollView很类似。
接下来，让我们来看一下TouchableWithoutFeedback常用属性：
说到常用属性，TouchableWithoutFeedback首先要提到的就是onPress了。
onPress function
当触摸操作结束时调用，但如果被取消了则不调用（譬如响应者被一个滚动操作取代）。
onPress可谓是Touchable系列组件的最常用属性之一，如果要让视图响应用户的单击事件，那么用onPress就可以了。
接下来，使用onPress属性来实现一个统计按钮单击次数的例子。
<TouchableWithoutFeedback
onPress={()=> {
this.setState({count: this.state.count+1})
}}
>
<View style={styles.button}>
<Text style={styles.buttonText}>
我是TouchableWithoutFeedback,单击我
</Text>
</View>
</TouchableWithoutFeedback>onLongPress function
当用户长时间按压组件(长按效果)的时候调用该方法。
onLongPress也是Touchable系列组件的最常用的属性之一，通常用于响应长按的事件，如长按列表弹出删除对话框等。
接下来，使用onLongPress属性来响应用户的长按事件。
<TouchableWithoutFeedback
onPress={()=> {
this.setState({count: this.state.count + 1})
}}
onLongPress={()=> {
this.setState({countLong: this.state.countLong + 1})
Alert.alert(
'提示',
'确定要删除吗?',
[
{text: '取消', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
{text: '确定', onPress: () => console.log('OK Pressed')},
]
)
}}
>
<View style={styles.button}>
<Text style={styles.buttonText}>
我是TouchableWithoutFeedback,单击我
</Text>
</View>
</TouchableWithoutFeedback>
<Text style={styles.text}>您单击了:{this.state.count}次</Text>
<Text style={styles.text}>您长按了:{this.state.countLong}次</Text>我们在上面例子的基础上为Touchable设置了onLongPress属性，当用户长时间按压按钮是会弹出一个对话框。
当我们没有对Touchable组件设置onLongPress属性，而设置了onPress属性的时候，我们长按按钮之后会回调onPress方法。另外，我们也可以通过delayLongPress方法来这设置从onPressIn被回调开始，到onLongPress被调用的延迟。
disabled bool
如果设为true，则禁止此组件的一切交互。
disabled也是Touchable系列组件的最常用的属性之一，通常用于禁止按钮响应用户的点击事件，比如，当用户单击按钮进行登录时，需要进行网络请求，在请求操作完成之前，如果用户多次单击登录按钮，我们通常不希望发起多次登录请求，这个时候就可以借助disabled属性来禁用按钮的交互。
接下来呢，我们就应用模拟用户登录的例子来介绍一下disabled的使用。
<TouchableWithoutFeedback
disabled={this.state.waiting}
onPress={()=> {
this.setState({text:'正在登录...',waiting:true})
setTimeout(()=>{
this.setState({text:'网络不流畅',waiting:false})
},2000);
}}
>
<View style={styles.button}>
<Text style={styles.buttonText}>
登录
</Text>
</View>
</TouchableWithoutFeedback>
<Text style={styles.text}>{this.state.text}</Text>在上面例子中我们模拟了用户登录的效果，默认状态下按钮是可以响应用户点击事件的，在正在登录过程中,我们通过disabled属性来禁用按钮，这时无论是单击还是长按按钮都是没有任何响应的，在停隔2s后，我们又将按钮解除禁用，这时按钮又可以重新响应用户的点击事件了。
当用户长时间按压按钮时会弹出一个对话框。
想禁用按钮，但是通过设置Touchable的accessible属性为false没有效果，这是因为即使accessible为false的情况下，Touchable组件还是可以响应交互事件的，要想禁用Touchable的交互事件，只能通过disabled属性。
onPressIn function与onPressOut function
这两个方法分别是当用户开始点击按钮时与点击结束后被回调。
通过这两个方法我们可以计算出用户单击按钮所用的时长， 另外也可以做一些其它个性化的功能。现在我们将通过一个例子来计算出用户点击按钮所用的时长。
<TouchableWithoutFeedback
onPressIn={()=> {
this.setState({text:'触摸开始',startTime:new Date().getTime()})
}}
onPressOut={()=>{
this.setState({text:'触摸结束,持续时间:'+(new Date().getTime()-this.state.startTime)+'毫秒'})
}}
>
<View style={styles.button}>
<Text style={styles.buttonText}>
点我
</Text>
</View>
</TouchableWithoutFeedback>
<Text style={styles.text}>{this.state.text}</Text>在上述例子中我们记录下用户单击按钮的时间戳，当单击结束后我们获取当前时间减去刚单击时的时间，它们的差值就是用户单击按钮所用的时间了。
另外，我们也可以通过delayPressIn与delayPressOut两个方法来分别设置，从用户点击按钮到onPressIn被回调的延时与从点击结束到onPressOut被回调时的延时。
三、TouchableHighlight 使用详解
TouchableHighlight是Touchable系列组件中比较常用的一个，它是在TouchableWithoutFeedback的基础上添加了一些UI上的扩展，既当手指按下的时候，该视图的不透明度会降低，同时会看到相应的颜色(视图变暗或者变亮)，从TouchableHighlight源码中我们可以看出，其实这个颜色就是在TouchableHighlight的最外层添加了一个View，通过改变这个View的背景色及透明度来达到这一效果。
render: function() {
return (
<View
accessible={this.props.accessible !== false}
accessibilityLabel={this.props.accessibilityLabel}
accessibilityComponentType={this.props.accessibilityComponentType}
accessibilityTraits={this.props.accessibilityTraits}
ref={UNDERLAY_REF}
style={this.state.underlayStyle}
onLayout={this.props.onLayout}
hitSlop={this.props.hitSlop}
onStartShouldSetResponder={this.touchableHandleStartShouldSetResponder}
onResponderTerminationRequest={this.touchableHandleResponderTerminationRequest}
onResponderGrant={this.touchableHandleResponderGrant}
onResponderMove={this.touchableHandleResponderMove}
onResponderRelease={this.touchableHandleResponderRelease}
onResponderTerminate={this.touchableHandleResponderTerminate}
testID={this.props.testID}>
{React.cloneElement(
React.Children.only(this.props.children),
{
ref: CHILD_REF,
}
)}
{Touchable.renderDebugView({color: 'green', hitSlop: this.props.hitSlop})}
</View>
);
}TouchableHighlight所扩展出来的属性
activeOpacity number
我们可以通过activeOpacity来设置TouchableHighlight被按下时的不透明度，从TouchableHighlight的源码中可以看出，它的默认不透明度为0.85，可以根据需要进行调节。
var DEFAULT_PROPS = {
activeOpacity: 0.85,
underlayColor: 'black',
};underlayColor color
可以通过underlayColor属性来设置TouchableHighlight被按下去的颜色，默认状态下为black黑色。
onHideUnderlay function
当衬底(也就是上文讲到的最外层的View)被隐藏的时候调用。
通常情况下，当手指结束点击时衬底会被隐藏。
onShowUnderlay function
当衬底(也就是上文讲到的最外层的View)显示的时候调用。
通常情况下，当手指刚开始点击时衬底会显示。
style View#style
因为TouchableHighlight的最外层个添加了一个View，所以我们可以设置这个View的样式来做出一个形形色色的按钮。
接下来，我们通过一个例子来看一下这些属性的使用。
<TouchableHighlight
style={{marginTop:20}}
activeOpacity={0.7}
underlayColor='green'
onHideUnderlay={()=>{
this.setState({text:'衬底被隐藏'})
}}
onShowUnderlay={()=>{
this.setState({text:'衬底显示'})
}}
onPress={()=>{
}}
>
<View style={styles.button}>
<Text style={styles.buttonText}>
TouchableHighlight
</Text>
</View>
</TouchableHighlight>
<Text style={styles.text}>{this.state.text}</Text>四、TouchableOpacity 使用详解
TouchableOpacity也是Touchable系列组件中比较常用的一个，它是在TouchableWithoutFeedback的基础上添加了一些UI上的扩展，但这些扩展相比TouchableHighlight少了一个额外的颜色变化。它是通过在按下去改变视图的不透明度来表示按钮被点击。
TouchableOpacity所扩展出来的属性
在扩展属性方面TouchableOpacity相比TouchableHighlight，就少了很多，只有一个activeOpacity，来设置按下去的透明度。
activeOpacity number
同TouchableHighlight的activeOpacity。
另外,我们也可以通过TouchableOpacity的setOpacityTo(value, duration)方法来动态修改TouchableOpacity被按下去的不透明度。
五、TouchableNativeFeedback 使用详解
为了支持Android5.0新增的触控反馈，React Native加入了TouchableNativeFeedback组件，TouchableNativeFeedback在TouchableWithoutFeedback所支持的属性的基础上增加了按下去的水波纹效果。可以通过background属性来自定义原生触摸操作反馈的背景。
TouchableNativeFeedback所扩展出来的属性
background backgroundPropType
决定在触摸反馈的时候显示什么类型的背景。它接受一个有着type属性和一些基于type属性的额外数据的对象。推荐使用以下的静态方法之一来创建这个对象：
TouchableNativeFeedback.SelectableBackground() - 会创建一个对象，表示安卓主题默认的对于被选中对象的背景。
TouchableNativeFeedback.SelectableBackgroundBorderless() - 会创建一个对象，表示安卓主题默认的对于被选中的无边框对象的背景。只在Android API level 21+适用。
TouchableNativeFeedback.Ripple(color, borderless) - 会创建一个对象，当按钮被按下时产生一个涟漪状的背景，你可以通过color参数来指定颜色，如果参数borderless是true，那么涟漪还会渲染到视图的范围之外。（参见原生actionbar buttons作为该效果的一个例子）。这个背景类型只在Android API level 21+适用，也就是Android5.0或以上设备。
<TouchableNativeFeedback
onPress={()=>{
this.setState({count: this.state.count + 1})
}}
background={TouchableNativeFeedback.SelectableBackground()}>
<View style={{width: 150, height: 100, backgroundColor: 'red'}}>
<Text style={{margin: 30}}>TouchableNativeFeedback</Text>
</View>
</TouchableNativeFeedback>
<Text style={styles.text}>{this.state.text}</Text>以上就是React Native按钮Touchable系列组件使用教程示例的详细内容，更多关于React Native按钮Touchable组件的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要为大家介绍了React Hook Form 优雅处理表单使用指南，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
这篇文章主要介绍了React 父子组件通信的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
memo可以自己决定是否更新，但它是一个函数组件而非一个类，本文主要介绍了React.memo引起的bug，具有一定的参考价值，感兴趣的可以了解一下2022-03-03
下面小编就为大家带来一篇react系列从零开始_简单谈谈react。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要介绍了React Native Modal 的封装与使用,本文通过实例代码图文相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-09-09
本文主要介绍了react 实现表格列表拖拽排序，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
这篇文章主要介绍了react项目实践之webpack-dev-serve,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家介绍了使用React SSR写Demo实现教程示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
这篇文章主要为大家详细介绍了React使用State Hook的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
这篇文章主要给大家介绍了关于React Native中Mobx的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-12-12
最新评论