【回覆“1024”，送你一個特別推送】

（友情提示：RN學習，從最基礎的開始，大家不要嫌棄太基礎，會的同學請自行略過，希望不要耽誤已經會的同學的寶貴時間）

在上篇 ScrollView 的講解的例項中，我們使用了TouchableOpacity的點選事件元件，可能很多人不是很理解，所以今天我們來講講觸控元件，這樣有利於我們以後寫例項。

Touchable前傳

Touchable系列元件，為什麼是系列元件呢，去看官方文件我們知道，文件導航元件介紹中，有四個關於Touchable的元件，分別是：TouchableHighlight ，TouchableNativeFeedback，TouchableOpacity，TouchableWithoutFeedback。為什麼要放到一起講呢，因為這四個元件功能差不多，只不過是效果不太一樣，所以放到一起講很方便，而是從名字我們就可以看出觸控有效果和沒效果之分，所以TouchableHighlight ，TouchableNativeFeedback，TouchableOpacity這三個帶有觸控效果的元件是繼承與TouchableWithoutFeedback的，它是觸控不帶有反饋效果的。
 

TouchableWithoutFeedback

除非你有一個非常的原因和理由，否則不要輕易使用這個元件。所有能夠響應觸控事件的元素都應該帶有一個反饋效果，這就是為什麼web應用體驗總是顯得不如原生效果好的原因之一。

友情提示：TouchableWithoutFeedback supports only one child If you wish to have several child components, wrap them in a View.（TouchableWithoutFeedback只支援一個子節點，如果你希望有多個子元素，請用view包裹住它們再使用）。

屬性

我們一起來看看，它有哪些屬性方法呢？ * accessibilityComponentType 顧名思義：設定可訪問的元件型別 * accessibilityTraits 設定可訪問的特徵 * accessible bool 當前元件是否可以訪問 * delayLongPress number 設定延遲毫秒的時間，從onPressIn方法開始到onLongPress被呼叫之前 * delayPressIn 設定延遲時間，從使用者觸控到delayPressIn被呼叫之間 * delayPressOut number 設定延遲時間，從觸控事件釋放到delayPressOut被呼叫這段時間 * disabled bool 如果為true，禁用次元件所有的互動 * hitSlop {top: number, left: number, bottom: number, right: number} 擴大了按鈕的外延範圍 * onLayout function 當佈局載入或者改變時被呼叫 * onLongPress function 長按元件時呼叫該方法 * onPress function 當用戶點選時被呼叫 * onPressIn function 當用戶開始觸控元件時回撥方法 * onPressOut function 同上相反，當用戶完成觸控時呼叫 * pressRetentionOffset {top: number, left: number, bottom: number, right: number} 在當前檢視不能滾動的前提下指定這個屬性，可以決定當手指移開多遠距離之後，會不再啟用按鈕。但如果手指再次移回範圍內，按鈕會被再次啟用。只要檢視不能滾動，你可以來回多次這樣的操作。確保你傳入一個常量來減少記憶體分配。

我說了該元件官網說了，不建議使用，因為沒有反饋效果，所以常用的是其他三種，而且都是繼承自它。我們主要講解下面是三種效果。

TouchableHighlight

TouchableHighlight，我們可以翻譯一下什麼意思？Touchable可觸控，Highlight高亮，所以這個觸控元件的效果是點選會出現高亮的反饋效果。

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

友情提示：TouchableHighlight只支援一個子節點，如果你希望有多個子元素，請用view包裹住它們再使用。

TouchableHighlight屬性

上面我們說了，TouchableHighlight繼承於TouchableWithoutFeedback，所以TouchableWithoutFeedback得屬性，我們都可以使用，這裡就不重複介紹了。咱們介紹它自己有的。

• activeOpacity number 設定封裝的檢視在被觸控操作啟用時用多少不透明度顯示（通常在0到1之間）。
• onHideUnderlay function 當底層隱藏後立即呼叫
• onShowUnderlay function 同上面相反，顯示時，立即呼叫
• style 風格樣式的使用同View的一樣，這裡就省略了，不知道的去看View的style
• underlayColor 當檢視被觸控或者點選時，顯示的顏色

效果展示

我們還是拿前面那個Image和ScrollView中使用的例子，只不過我們現在給它加上按壓效果。來看看吧，先看效果圖，具體程式碼，我在最後放出來。

效果圖如下：

TouchableOpacity

關於TouchableOpacity的例子，我們在上篇ScrollView中用到過了，現在講講概念。

TouchableOpacity元件用於封裝檢視，它使其可以正確響應觸控操作。當按下的時候，封裝的檢視的不透明度會降低，但是這個過程並不會真正改變檢視層級，而且我們非常容易簡單的新增到應用而且不會產生其他額外的一些錯誤。

屬性和方法

同理，TouchableOpacity繼承於TouchableWithoutFeedback，所以TouchableWithoutFeedback得屬性，我們都可以使用，這裡就不重複介紹了。咱們介紹它自己有的。

• activeOpacity number 設定按壓效果時，檢視的透明度
• setOpacityTo(value) 這是一個設定不透明度的方法

效果展示

TouchableNativeFeedback

注意：這個元件僅限於在Android平臺使用，顧名思義：就是觸控事件帶有本地原聲反饋效果。在Android裝置上，這個元件利用原生狀態來渲染觸控的反饋。目前它只支援一個單獨的View例項作為子節點。在底層實現上，實際會建立一個新的RCTView結點替換當前的子View，並附帶一些額外的屬性。而且原生觸控操作反饋的背景可以使用background屬性來自定義。

屬性

同理，TouchableNativeFeedback繼承於TouchableWithoutFeedback，所以TouchableWithoutFeedback得屬性，我們都可以使用，這裡就不重複介紹了。咱們介紹它自己有的。

• background 決定在觸控反饋的時候顯示什麼型別的背景。它接受一個有著type屬性和一些基於type屬性的額外資料的物件。我們推薦使用以下的靜態方法之一來建立這個物件：
  • TouchableNativeFeedback.SelectableBackground() - 會建立一個物件，表示安卓主題預設的對於被選中物件的背景。(?android:attr/selectableItemBackground)
  • TouchableNativeFeedback.SelectableBackgroundBorderless() - 會建立一個物件，表示安卓主題預設的對於被選中的無邊框物件的背景。(?android:attr/selectableItemBackgroundBorderless)。只在Android API level 21+適用。
  • TouchableNativeFeedback.Ripple(color, borderless) - 會建立一個物件，當按鈕被按下時產生一個漣漪狀的背景，你可以通過color引數來指定顏色，如果引數borderless是true，那麼漣漪還會渲染到檢視的範圍之外。（參見原生的actionbar buttons作為該效果的一個例子）。這個背景型別只在Android API level 21+適用。

效果展示

看看5.0以後的新特性，水波紋特性，如下： 怎麼樣？很漂亮吧？

綜合例項

程式碼如下：

關於觸控按壓的元件，我們就講到這裡了，東西確實很簡單，喜歡看英文的，還是建議看官網，這些內容其實都是我從官網學的，然後根據學的，自己寫了一個例子罷了，沒有什麼難的，希望大家多動手實踐吧！