初识TappableComponents

前言

本Demo仅粗略讲述tap的三种组件,仅供参考,深入学习请参考其它资料

原理

使用父组件包裹一个子组件,父组件默认为透明。当点击操作发生时,由父组件接收然后发生响应。

用法

TouchableWithoutFeedback

TouchableWithoutFeedback没有可视化的响应,因此不推荐使用。

<TouchableWithoutFeedback onPress={this._onPressButton}>
    <View>
        <Text>TouchableWithoutFeedback</Text>
    </View>
</TouchableWithoutFeedback>

属性:

  • accessibilityComponentType
  • accessibilityTraits
  • accessible
  • delayPressIn = 从触摸屏幕开始number毫秒后调用
  • onPressIndelayLongPress = 从PressIn开始后number毫秒后调用onLongPress
  • delayPressOut = 从手指离开屏幕number毫秒后调用onPressOut
  • disabled = bool是否禁止此组件交互
  • hitSlop = {top: number, left: number, bottom: number, right: number}可触摸区域的扩展范围
  • onLayout = 当加载或者布局改变的时候调用,用来重新布局{nativeEvent: {layout: {x, y, width, height}}}
  • onLongPress = 方法
  • onPress = 方法
  • onPressIn = 方法
  • onPressOut = 方法
  • pressRetentionOffset = 和hitSlop相似,但是只有在按钮已被激活的情况下此范围才有效

TouchableHighlight

  • 继承了TouchableWithoutFeedback所有属性
  • 触发时父组件的背景变暗

<TouchableHighlight onPress={this._onPressButton}>
    <Text>TouchableHighlight</Text>
</TouchableHighlight>

TouchableOpacity

  • 继承了TouchableWithoutFeedback所有属性
  • 触发时父组件的透明度降低
<TouchableOpacity onPress={this._onPressButton} setOpacityTo={0.3}>
    <Text>TouchableOpacity</Text>
</TouchableOpacity>

demo源码

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,107评论 19 139
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,088评论 0 29
  • http://www.cnblogs.com/Sweet-Candy/p/5695389.html React-N...
    心淡然如水阅读 4,405评论 0 0
  • 食材:水果类:百香果、红心火龙果、蓝莓、芒果、牛油果。粗粮:薏米、红豆、燕麦、黑芝麻。坚果:南瓜子、葡萄干、核桃、...
    身心健康关注阅读 1,168评论 0 2
  • 12年的九月份踏入这个学校的时候,从没想过我会变成自己嗤之以鼻的那类人。只是世事无常,时间一眼望不到尽头以至于飘渺...
    偏爱阅读 333评论 0 1