react native 触摸Touchable***的区别（TouchableWithoutFeedback、TouchableOpacity、TouchableHighlight、TouchableNativeFeedback）
一、问题背景：
react native的跨平台开发没有button的概念，而是使用touchable系列实现点击触发效果。
而touchable系列就有四个之多，而且相互之间仍有较大差别，这就给我们造成很大的困扰，今天就来分析一下这类在react native中必不可少的组件。
二、分析描述
（一）、归类分析
一共有四个touchable相关的点击触发按钮，分别是：
- TouchableWithoutFeedback
- TouchableOpacity
- TouchableHighlight
- TouchableNativeFeedback
我们可以分成3类来描述：
- 第一类：TouchableWithoutFeedback： 触摸后在视觉上没有任何点击效果反馈
- 第二类：包括：TouchableHighlight 和 TouchableOpacity 两者都继承之TouchableWithoutFeedback
- TouchableHighlight ： 实现高亮的触摸反馈
- TouchableOpacity ： 实现透明度的触摸反馈
- 第三类：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>
三、结束
