一、問題背景：
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>
三、結束