React-Native开发四 React Native 的Touchable组件

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qiyei2009/article/details/80977360

1 Touchable组件简介

Touchable组件是RN的按钮组件，一共有四大类
TouchableWithoutFeedback：不带任何反馈的可触摸组件
TouchableHighlight：在TouchableWithoutFeedback的基础上添加了当按下时背景会变暗的效果。
TouchableOpacity：相比TouchableHighlight在按下去会使背景变暗的效果，TouchableOpacity会在用户手指按下时降低按钮的透明度，而不会改变背景的颜色。
TouchableNativeFeedback：在Android上还可以使用TouchableNativeFeedback，它会在用户手指按下时形成类似水波纹的视觉效果。注意，此组件只支持Android。

2 Touchable组件使用

Touchable组件主要用作按钮使用，可以处理一下事件
1 onPress function
当触摸操作结束时调用，但如果被取消了则不调用（譬如响应者被一个滚动操作取代），一般可用作点击事件

    render(){
        return(
            <View style={styles.container}>
                <TouchableOpacity onPress={this._onPress.bind(this)} }>
                    <Text>onPress</Text>
                </TouchableOpacity>
            </View>
        );
    }

    _onPress(){
        console.log("onPress");
    }

2 onLongPress function
长按事件，长按按钮时触发

    <TouchableOpacity onLongPress={this._onLongPress.bind(this)}>
         <Text>onLongPress</Text>
    </TouchableOpacity>

    _onLongPress(){
        console.log("onLongPress");
    }

3 disabled bool
禁止使能，长用于禁止按下等操作，是Touchable组件的属性之一

                <TouchableOpacity disabled={true}>
                    <Text>无法点击</Text>
                </TouchableOpacity>

4 onPressIn function
表示用户点击时开始按下时，类似于Android中的Action_down事件

5 onPressOut function
表示用户点击时将要结束时，类似于Android中的Action_up事件

onPressIn 与onPressOut结合可以计算用户按下的时间。

    <TouchableOpacity onPressIn={this._pressIn.bind(this)} onPressOut={this._pressOut.bind(this)}>
          <Text>测试按下的时间</Text>
    </TouchableOpacity>

    _pressIn(){
        console.log("pressIn");
    }

    _pressOut(){
        console.log("pressOut");
    }