前言
本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>