React Native 学习之组件：Touchable*

本文为作者学习记录，仅作参考，如有错误与疑问，以官方文档为准。

介绍

React Native作为一款优秀的跨平台移动端框架，在APP开发中常常需要用户交互，但是RN并没有相关的类似于按钮点击事件的组件，此时便可通过TouchableWithoutFeedback、TouchableHighlight、TouchableOpacity此类组件来实现点击事件的交互相应。

TouchableWithoutFeedback

TouchableWithoutFeedback：这个组件可以说是Touchable相关几个组件的基础，响应用户的点击事件，如果你想在处理点击事件的同时不显示任何视觉反馈，使用它是个不错的选择。

TouchableHighlight

由TouchableHighlight可以看出，TouchableHighlight其实是以TouchableWithoutFeedback为基础，添加了当按下时背景会变暗的效果

var TouchableHighlight = React.createClass({ propTypes: { ...TouchableWithoutFeedback.propTypes,

TouchableOpacity

同样的，TouchableOpacity也是以TouchableWithoutFeedback为基础，相比TouchableHighlight在按下去会使背景变暗的效果，TouchableOpacity会在用户手指按下时降低按钮的透明度，而不会改变背景的颜色。

var TouchableOpacity = React.createClass({
  mixins: [TimerMixin, Touchable.Mixin, NativeMethodsMixin],

  propTypes: {
    ...TouchableWithoutFeedback.propTypes,

属性

1. disabled

如果设为 true，则禁止此组件的一切交互。

2. onPress

点击事件 - 当触摸操作结束时调用，但如果被取消了则不调用（譬如响应者被一个滚动操作取代或者触摸结束时移出相应组件）。

eg:

<TouchableWithoutFeedback
    onPress={()=> {
        //响应点击事件
    }}
>
    <View>
        <Text>
            我是TouchableWithoutFeedback,单击我
        </Text>
    </View>
</TouchableWithoutFeedback>

3. onLongPress

当用户长时间按压组件(长按效果)的时候调用该方法。 此方法通常用于响应长按的事件，如长按列表弹出删除对话框等。 注意：当onLongPress方法执行那么此次触摸便不再执行onPress方法

eg:

<TouchableWithoutFeedback
    onLongPress={()=> {
        // 响应弹框
        Alert.alert(
            '提示',
            '确定要删除吗?',
            [
                {text: '取消', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
                {text: '确实', onPress: () => console.log('OK Pressed')},
            ]
        )
    }}
>
    <View>
        <Text>
            我是TouchableWithoutFeedback,单击我
        </Text>
    </View>
</TouchableWithoutFeedback>

4.onPressIn

在元素被触摸时调用。这在进行网络请求时非常有用。

5.onPressOut

在元素被结束触摸时且在onPress之前调用。

同时支持其他基础属性