react native 触摸Touchable***的区别（TouchableWithoutFeedback、TouchableOpacity、TouchableHighlight、TouchableNativeFeedback）

一、问题背景：

react native的跨平台开发没有button的概念，而是使用touchable系列实现点击触发效果。

而touchable系列就有四个之多，而且相互之间仍有较大差别，这就给我们造成很大的困扰，今天就来分析一下这类在react native中必不可少的组件。

二、分析描述

（一）、归类分析

　　一共有四个touchable相关的点击触发按钮，分别是：

• TouchableWithoutFeedback
• TouchableOpacity
• TouchableHighlight
• TouchableNativeFeedback

　  我们可以分成3类来描述：

1. 第一类：TouchableWithoutFeedback： 触摸后在视觉上没有任何点击效果反馈
2. 第二类：包括：TouchableHighlight 和 TouchableOpacity 两者都继承之TouchableWithoutFeedback
• TouchableHighlight ： 实现高亮的触摸反馈
• TouchableOpacity   ： 实现透明度的触摸反馈
3. 第三类：TouchableNativeFeedback： 可以在Android 5.0以后触摸实现水波纹的效果，（因此仅限Android平台，iOS平台使用会报错）

（二）、详细描述

TouchableWithoutFeedback：

Touchable系列组件中最基本的一个组价，只响应用户的点击事件不会做任何UI上的改变，在使用的过程中需要特别留意。

注意：该标签不可以添加style样式属性，加了也没效果

相关属性： 

• onPress function   当触摸操作结束时调用，但如果被取消了则不调用（譬如响应者被一个滚动操作取代）
• onLongPress function  当用户长时间按压组件(长按效果)的时候调用该方法。
• disabled bool  如果设为true，则禁止此组件的一切交互。
• onPressIn function与onPressOut function  分别是当用户开始点击按钮时与点击结束后被回调。

<TouchableWithoutFeedback
    onPress={()=> {alert('触摸效果')}}
    onLongPress={()=> {alert('长按效果')}}
    disabled={false}    //默认是false，如果是true表示关闭该组件的触摸功能
    onPressIn={()=> {alert('触摸开始')}}
    onPressOut={()=>{alert('触摸结束')}}
>
    <View><Text>TouchableWithoutFeedback的测试</Text></View>
</TouchableWithoutFeedback>

TouchableHighlight:

Touchable系列组件中比较常用的一个，它是在TouchableWithoutFeedback的基础上添加了一些UI上的扩展，既当手指按下的时候，该视图的不透明度会降低，同时会看到相应的颜色(视图变暗或者变亮)

注意：该标签可以添加style样式属性，因为有一层<View>可以使用

其实就是在TouchableHighlight 的外层套了一层<View>通过改变view组件的颜色和透明度来实现点击效果的改变

相关属性： 

• activeOpacity number  用于设置被按下时按钮的不透明度，默认是0.85
• underlayColor color  用于设置被按下时按钮的颜色，默认是black
• onShowUnderlay function  最外层的View显示的时候调用
• onHideUnderlay function  最外层的View被隐藏的时候调用
• style View#style  最外层的View可以设置样式
• onPress function   当触摸操作结束时调用，但如果被取消了则不调用（譬如响应者被一个滚动操作取代）
• onLongPress function  当用户长时间按压组件(长按效果)的时候调用该方法。
• disabled bool  如果设为true，则禁止此组件的一切交互。
• onPressIn function与onPressOut function  分别是当用户开始点击按钮时与点击结束后被回调。

<TouchableHighlight
    style={{}}
    activeOpacity={0.6}
    underlayColor='red'
    onHideUnderlay={()=>{alert('衬底被隐藏')}}
    onShowUnderlay={()=>{alert('衬底显示')}}
>
    <View><Text>TouchableHighlight的测试</Text></View>
</TouchableHighlight>

TouchableOpacity：（完全同TouchableHighlight，只是不可以修改颜色，只能修改透明度，可以添加样式效果）

TouchableOpacity也是Touchable系列组件中比较常用的一个，它是在TouchableWithoutFeedback的基础上添加了一些UI上的扩展，但这些扩展相比TouchableHighlight 少了一个额外的颜色变化。它是通过在按下去改变视图的不透明度来表示按钮被点击的。

TouchableNativeFeedback：（仅限Android平台，且5.0以上）

为了支持Android5.0新增的触控反馈，React Native加入了TouchableNativeFeedback 组件，TouchableNativeFeedback 在TouchableWithoutFeedback 所支持的属性的基础上增加了按下去的水波纹效果。我们可以通过background 属性来自定义原生触摸操作反馈的背景

（三）、补充提示

提示一：无论是TouchableWithoutFeedback还是其他三种Touchable组件，都是在根节点都是只支持一个组件，如果你需要多个组件同时响应单击事件，可以用一个View将它们包裹着，它的这种根节点只支持一个组件的特性和ScrollView很类似。

//错误示范：其他的Touchable系列同样
<TouchableHighlight
    style={{}}
   onPress={() => {alert('123')}}
>
    <View><Text>TouchableHighlight的测试</Text></View>
    <View><Text>这是错误的，TouchableHighlight中只能有一个总节点包裹</Text></View>
</TouchableHighlight>

//正确
<TouchableHighlight
    style={{}}
   onPress={() => {alert('123')}}
>
    <View>
        <View><Text>TouchableHighlight的测试</Text></View>
        <View><Text>这是错误的，TouchableHighlight中只能有一个总节点包裹</Text></View>
    </View>
</TouchableHighlight>

提示二： <Text>组件也有点击功能 可通过onPress实现触摸回调

//Text也可以实现点击功能
<Text
    style={{}}
    onPress={()} => {alert('Text组件的点击功能')}
    >Text的点击功能
</Text>

三、结束