今天，我們來看下ReactNative提供的可觸控元件。

分別為:TouchableHighlight、TouchableNativeFeedback、TouchableOpacity、TouchableWithoutFeedback。

TouchableWithoutFeedback控制元件是觸控點選不帶反饋效果的，另外三個都是有反饋效果。這三個元件都繼承了所有TouchableWithoutFeedback的屬性。

1、TouchableWithoutFeedback

官網解釋：

除非你有一個很好的理由，否則不要用這個元件。所有能夠響應觸屏操作的元素在觸屏後都應該有一個視覺上的反饋（然而本元件沒有任何視覺反饋）。這也是為什麼一個"web"應用總是顯得不夠"原生"的主要原因之一。

注意：TouchableWithoutFeedback只支援一個子節點，如果你希望包含多個子元件，用一個View來包裝它們。

屬性
accessible bool 

delayLongPress number 
單位是毫秒，從onPressIn開始，到onLongPress被呼叫的延遲。

delayPressIn number 
單位是毫秒，從觸控操作開始到onPressIn被呼叫的延遲。

delayPressOut number 
單位是毫秒，從觸控操作結束開始到onPressOut被呼叫的延遲。

disabled bool 
如果設為true，則禁止此元件的一切互動。

hitSlop {top: number, left: number, bottom: number, right: number} 
這一屬性定義了按鈕的外延範圍。這一範圍也會使pressRetentionOffset（見下文）變得更大。 注意：觸控範圍不會超過父檢視的邊界，也不會影響原先和本元件層疊的檢視（保留原先的觸控優先順序）。

onLayout function 
當載入或者佈局改變的時候被呼叫，引數為：{nativeEvent: {layout: {x, y, width, height}}}

onLongPress function 

onPress function 
當觸控操作結束時呼叫，但如果被取消了則不呼叫（譬如響應者被一個滾動操作取代）

onPressIn function 

onPressOut function 

pressRetentionOffset {top: number, left: number, bottom: number, right: number} 
在當前檢視不能滾動的前提下指定這個屬性，可以決定當手指移開多遠距離之後，會不再啟用按鈕。但如果手指再次移回範圍內，按鈕會被再次啟用。只要檢視不能滾動，你可以來回多次這樣的操作。確保你傳入一個常量來減少記憶體分配。

<TouchableWithoutFeedback onPress={()=>{console.log('I am onPressed!')})>
    <View style={styles.xxx}>
    </View>
<TouchableWithoutFeedback/>
 

2、TouchableHighlight

官網的解釋：

本元件用於封裝檢視，使其可以正確響應觸控操作。當按下的時候，封裝的檢視的不透明度會降低，同時會有一個底層的顏色透過而被使用者看到，使得檢視變暗或變亮。在底層實現上，實際會建立一個新的檢視到檢視層級中，如果使用的方法不正確，有時候會導致一些不希望出現的視覺效果。譬如沒有給檢視的backgroundColor顯式宣告一個不透明的顏色。

注意：TouchableHighlight只支援一個子節點，如果你希望包含多個子元件，用一個View來包裝它們。

屬性
TouchableWithoutFeedback props... 
譯註：這意味著本元件繼承了所有TouchableWithoutFeedback的屬性。

activeOpacity number 
指定封裝的檢視在被觸控操作啟用時以多少不透明度顯示（通常在0到1之間）。

onHideUnderlay function 
當底層的顏色被隱藏的時候呼叫。

onShowUnderlay function 
當底層的顏色被顯示的時候呼叫。

style View#style 

underlayColor string 
有觸控操作時顯示出來的底層的顏色。

示例：

<TouchableHighlight underlayColor='#f0f0f0' onPress={this.openIM.bind(this)} style={styles.userIMImageView}>
      <Image source={{uri:'im'}} style={styles.userIMImage}/>
</TouchableHighlight>

3、TouchableOpacity

官網解釋：

本元件用於封裝檢視，使其可以正確響應觸控操作。當按下的時候，封裝的檢視的不透明度會降低。這個過程並不會真正改變檢視層級，大部分情況下很容易新增到應用中而不會帶來一些奇怪的副作用。（譯註：此元件與TouchableHighlight的區別在於並沒有額外的顏色變化，更適於一般場景）。

屬性
TouchableWithoutFeedback props... 
譯註：這意味著本元件繼承了所有TouchableWithoutFeedback的屬性。

activeOpacity number 
指定封裝的檢視在被觸控操作啟用時以多少不透明度顯示（通常在0到1之間）。

示例：

<TouchableOpacity
    style={styles.saveView}
    onPress={this.refuse.bind(this)}
    activeOpacity={0.7}
>
    <Text style={styles.saveText}>
       拒單
    </Text>
</TouchableOpacity>

1、將TouchableOpacity元件當成一個View元件，子元件為Text，封裝成一個Button
2、當按鈕被點選時，不透明度activeOpacity設定為0.7

需要注意的是TouchableHighlight和TouchableHighlight只有設定onPress方法後，對應的背景色和透明度才有效。

4、TouchableNativeFeedback

官網解釋：

本元件用於封裝檢視，使其可以正確響應觸控操作（僅限Android平臺）。在Android裝置上，這個元件利用原生狀態來渲染觸控的反饋。目前它只支援一個單獨的View例項作為子節點。在底層實現上，實際會建立一個新的RCTView結點替換當前的子View，並附帶一些額外的屬性。
原生觸控操作反饋的背景可以使用background屬性來自定義。

由於不支援跨平臺，建議先不要使用這個元件。這裡就先不說了。

參考：http://reactnative.cn/docs/0.31/touchablewithoutfeedback.html#content