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

最新推荐文章于 2025-01-18 22:11:16 发布

2401_84447362

最新推荐文章于 2025-01-18 22:11:16 发布

阅读量1k

点赞数 15

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

本文链接：https://blog.youkuaiyun.com/2401_84447362/article/details/138931059

版权

最后

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

            {text: '确定', onPress: () => console.log('OK Pressed')},
        ]
    )
}}

<View style={styles.button}>
    <Text style={styles.buttonText}>
        我是TouchableWithoutFeedback,单击我
    </Text>
</View>

您单击了:{this.state.count}次您长按了:{this.state.countLong}次


我们在上面例子的基础上为`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}>
       登录
    </T

最低0.47元/天解锁文章