ReactNative进阶（十九）：React Native 按钮 Touchable 系列组件使用详解_touchablewithoutfeedback(1)

2401_84447362

于 2024-05-16 01:32:09 发布

阅读量861

点赞数 16

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84447362/article/details/138931044

版权

程序员专栏收录该内容

146 篇文章 1 订阅

订阅专栏

总结

前端资料汇总

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。
算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯
在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。
要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！

接下来，让我们来看一下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>


### 最后

小编综合了阿里的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![](https://img-blog.csdnimg.cn/img_convert/45f2869b91b538dd3bb3290ba13bc806.png)  

![](https://img-blog.csdnimg.cn/20210419193354991.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0tlcGxlcl9JSQ==,size_16,color_FFFFFF,t_70)

虽只说了一个公司的面试，但我们可以知道大厂关注的东西并举一反三，通过一个知识点延伸到另一个知识点，这是我们要掌握的学习方法，小伙伴们在这篇有学到的请评论点赞转发告诉小编哦，谢谢大家的支持！

2401_84447362

关注

16
点赞
踩
30

收藏

觉得还不错? 一键收藏
0
评论
ReactNative进阶（十九）：React Native 按钮 Touchable 系列组件使用详解_touchablewithoutfeedback(1)

前端资料汇总开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。
复制链接

扫一扫