一、TouchableHighlight

概念：

本組件用於封裝視圖，使其可以正確響應觸摸操作。當按下的時候，封裝的視圖的不透明度會降低，同時會有一個底層的顏色透過而被用戶看到，使得視圖變暗或變亮。

在底層實現上，實際會創建一個新的視圖到視圖層級中，如果使用的方法不正確，有時候會導致一些不希望出現的視覺效果。譬如沒有給視圖的backgroundColor顯式聲明一個不透明的顏色。

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

renderButton: function() {
  return (
    <TouchableHighlight onPress={this
 
._onPressButton}>
      <Image
        style={styles.button}
        source={require(‘./button.png‘)}
      />
    </TouchableHighlight>
  );
},

屬性：繼承了所有TouchableWithoutFeedback的屬性。

1. activeOpacity Number 指定封裝的視圖在被觸摸操作激活時以多少不透明度顯示（通常在0到1之間）。

2. onHideUnderlay Function 當底層的顏色被隱藏的時候調用。

3. onShowUnderlay Function 當底層的顏色被顯示的時候調用。

4. style

5. underlayColor String 觸摸操作時的底層顏色

二、TouchableNativeFeedback

概念：

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

renderButton: function
 
() {
  return (
    <TouchableNativeFeedback
        onPress={this._onPressButton}
        background={TouchableNativeFeedback.SelectableBackground()}>
      <View style={{width: 150, height: 100, backgroundColor: ‘red‘}}>
        <Text style={{margin: 30}}>Button</Text>
      </View>
    </TouchableNativeFeedback>
  );
},

屬性：繼承了所有TouchableWithoutFeedback的屬性。

1.background backgroundPropType 決定在觸摸反饋的時候顯示什麽類型的背景。接受一個type屬性和一些基於type屬性的額外數據的對象。推薦使用以下靜態方法之一來創建這個對象：

• TouchableNativeFeedback.SelectableBackground() - 會創建一個對象，表示安卓主題默認的對於被選中對象的背景。　　

• TouchableNativeFeedback.SelectableBackgroundBorderless() - 會創建一個對象，表示安卓主題默認的對於被選中的無邊框對象的背景。(?android:attr/selectableItemBackgroundBorderless)。只在Android API level 21+適用。
• TouchableNativeFeedback.Ripple(color, borderless) - 會創建一個對象，當按鈕被按下時產生一個漣漪狀的背景，你可以通過color參數來指定顏色，如果參數borderless是true，那麽漣漪還會渲染到視圖的範圍之外。（參見原生的actionbar buttons作為該效果的一個例子）。這個背景類型只在Android API level 21+適用。

三、TouchableOpacity

概念：

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

renderButton: function() {
  return (
    <TouchableOpacity onPress={this._onPressButton}>
      <Image
        style={styles.button}
        source={require(‘image!myButton‘)}
      />
    </TouchableOpacity>
  );
},

屬性：繼承了所有TouchableWithoutFeedback的屬性。

1. activeOpacity Number 指定封裝的視圖在被觸摸操作激活時以多少不透明度顯示（通常在0到1之間）

四、TouchableWithoutFeedback

概念：

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

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

屬性：

1. accessibilityComponentType

2. accessibilityTraits

3. accessible

4. delayLongPress 單位是毫秒，從onPressIn開始，到onLongPress被調用的延遲。

5. delayPressIn 單位是毫秒，從觸摸操作開始到onPressIn被調用的延遲。

6. delayPressOut 單位是毫秒，從觸摸操作結束開始到onPressOut被調用的延遲。

7. disabled 如果設為true，則禁止此組件的一切交互。

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

9. onLayout 當加載或者布局改變的時候被調用，參數為：

   {nativeEvent: {layout: {x, y, width, height}}}

10. onLongPress

11. onPress 當觸摸操作結束時調用，但如果被取消了則不調用（譬如響應者被一個滾動操作取代）

12. onPressIn

13. onPressOut

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

React Native之Touchable四組件