初识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源码