1.RN的基本觸摸事件

RN的組件除了TextInput、ScrollView（ListView）外，默認(rèn)是不支持點(diǎn)擊事件，也不能響應(yīng)基本觸摸事件，所以RN中提供了幾個(gè)直接處理響應(yīng)事件的組件，TouchableHighlight，TouchableNativeFeedback，TouchableOpacity和TouchableWidthoutFeedback。這四個(gè)Touch類組件有如下回調(diào)方法：

• onPressIn: 點(diǎn)擊開始
• onPressOut: 點(diǎn)擊結(jié)束或者離開
• onPress: 單擊事件回調(diào)
• onLongPress: 長(zhǎng)按事件回調(diào)

以TouchableOpacity使用為例：

<TouchableHighlight  
  onPressIn={() => console.log("onPressIn")}
  onPressOut={() => console.log("onPressOut")}
  onPress={() => console.log("onPress")}
  onLongPress={() => console.log("onLongPress")}/>

2.單組件觸摸事件處理

單個(gè)組件的單次操作交互處理的生命周期如下：

生命周期.png

在整個(gè)事件中，組件可以在非事件響應(yīng)者和事件響應(yīng)者中切換身份

非事件響應(yīng)者
默認(rèn)情況下，觸摸事件輸入不會(huì)直接傳遞給組件，不能進(jìn)行事件響應(yīng)處理，也就是非事件響應(yīng)者。如果組件要進(jìn)行觸摸事件處理，首先要申請(qǐng)成為事件響應(yīng)者，組件有如下兩個(gè)屬性可以做這樣的申請(qǐng)：

• View.props.onStartShouldSetResponder，這個(gè)屬性接收一個(gè)回調(diào)函數(shù)，函數(shù)原型是function(evt): bool，在觸摸事件開始(touchDown)的時(shí)候，RN會(huì)回調(diào)此函數(shù)，詢問(wèn)組件是否需要成為事件響應(yīng)者，接收事件處理，如果返回true，表示需要成為響應(yīng)者
• View.props.onMoveShouldSetResponder，它和前一個(gè)屬性類似，不過(guò)這是觸摸，是進(jìn)行過(guò)程中(touchMove)，RN詢問(wèn)組件是否要成為響應(yīng)者，返回true表示想要成為響應(yīng)者

假如組件通過(guò)上面的方法反回了true，表示發(fā)出了申請(qǐng)要成為事件響應(yīng)者，想要接收后續(xù)的事件輸入。因?yàn)橥粫r(shí)刻，只能有一個(gè)事件處理響應(yīng)者，RN還需要協(xié)調(diào)所有組件的事件處理請(qǐng)求，所以不是每個(gè)組件申請(qǐng)都能成功，RN通過(guò)如下兩個(gè)回調(diào)來(lái)通知告訴組件它的申請(qǐng)結(jié)果：

• View.props.onResponderGrant: (evt) => {}：表示申請(qǐng)成功，組件成為了事件處理響應(yīng)者，這時(shí)組件就開始接收后序的觸摸事件輸入。一般情況下，這時(shí)開始，組件進(jìn)入了激活狀態(tài)，并進(jìn)行一些事件處理或者手勢(shì)識(shí)別的初始化。
• View.props.onResponderReject: (evt) => {}：表示申請(qǐng)失敗了，這意味著其他組件正在進(jìn)行事件處理，并且它不想放棄事件處理，所以你的申請(qǐng)被拒絕了，后續(xù)輸入事件不會(huì)傳遞給本組件進(jìn)行處理。

事件響應(yīng)者
如果通過(guò)上面的步驟，組件申請(qǐng)成為了事件響應(yīng)者，后緒的事件輸入都會(huì)通過(guò)回調(diào)函數(shù)通知到組件：

• View.props.onResponderStart: (evt) => {}：表示手指按下時(shí)，成功申請(qǐng)為事件響應(yīng)者的回調(diào)
• View.props.onResponderMove: (evt) => {}：表示觸摸手指移動(dòng)的事件，這個(gè)回調(diào)非常頻繁，所以這個(gè)回調(diào)函數(shù)的內(nèi)容需要盡量簡(jiǎn)單
• View.props.onResponderRelease: (evt) => {}：表示觸摸完成(touchUp)時(shí)候的回調(diào)，表示用戶完成了本次的觸摸交互，這里應(yīng)該完成手勢(shì)識(shí)別的處理，這以后，組件不再是事件響應(yīng)者，組件取消激活
• View.props.onResponderEnd: (evt) => {}：表示組件結(jié)束事件響應(yīng)的回調(diào)

在上面的圖中也可以看到，在組件成為事件響應(yīng)者期間，其他組件也可能會(huì)申請(qǐng)觸摸事件處理。此時(shí)RN會(huì)通過(guò)回調(diào)詢問(wèn)是否可以讓出響應(yīng)者角色。回調(diào)如下：

• View.props.onResponderTerminationRequest: (evt) => bool

如果回調(diào)函數(shù)返回為true，則表示同意釋放響應(yīng)者角色，同時(shí)會(huì)回調(diào)如下函數(shù)，通知組件事件響應(yīng)處理被終止了：

• View.props.onResonderTerminate: (evt) => {}
  這個(gè)回調(diào)也會(huì)發(fā)生在系統(tǒng)直接終止組件的事件處理，例如用戶在觸摸操作過(guò)程中，突然來(lái)電話的情況。

事件數(shù)據(jù)結(jié)構(gòu)
之前的事件處理函數(shù)只寫了一個(gè)參數(shù)，實(shí)際上有兩個(gè)參數(shù)，一個(gè)是nativeEvent（原生事件）；另一個(gè)是gestureState（手勢(shì)狀態(tài)）

原生事件有以下成員變量：

• identifier：觸摸的ID，一般對(duì)應(yīng)手指，在多點(diǎn)觸控的時(shí)候，用來(lái)區(qū)分哪個(gè)手指的觸摸事件；
• locationX和locationY：觸摸點(diǎn)相對(duì)父元素的坐標(biāo)
• pageX和pageY：觸摸點(diǎn)相對(duì)屏幕的坐標(biāo)
• timestamp：當(dāng)前觸摸的事件的時(shí)間戳，可以用來(lái)進(jìn)行滑動(dòng)計(jì)算
• target：接收當(dāng)前觸摸事件的組件ID
• changedTouches：evt數(shù)組，叢上次回調(diào)上報(bào)的觸摸事件，到這次上報(bào)之間的所有事件數(shù)組。因?yàn)橛脩粲|摸過(guò)程中，會(huì)產(chǎn)生大量事件，有時(shí)候可能沒(méi)有及時(shí)上報(bào)，系統(tǒng)用這種方式批量上報(bào)；
• touches：evt數(shù)組，多點(diǎn)觸摸的時(shí)候，包含當(dāng)前所有觸摸點(diǎn)的事件
  由于RN沒(méi)有多點(diǎn)觸控的概念，所以有些屬性是不能用的，最常用的是locationX和locationY數(shù)據(jù)，需要注意的是，因?yàn)檫@里是Native的數(shù)據(jù)，所以他們的單位是實(shí)際像素。如果要轉(zhuǎn)換為RN的邏輯單位，可以使用如下方式：

let pX = evt.nativeEvent.locationX / PixelRatio.get();

3.嵌套組件事件處理
前面也提到過(guò)，當(dāng)組件需要作為事件處理響應(yīng)者時(shí)，需要通過(guò)onStartShouldSetResponder或者onMoveShouldSetResponder回調(diào)返回true來(lái)申請(qǐng)。加入當(dāng)多個(gè)組件嵌套的時(shí)候，這兩個(gè)回調(diào)都反回了true的時(shí)候，但是同一個(gè)只能有一個(gè)事件處理響應(yīng)者，這種情況如何處理？假設(shè)有如下布局：

Paste_Image.png

在RN中，默認(rèn)情況下使用冒泡機(jī)制，最深的組件最先開始響應(yīng)，所以前面描述的情況，若A、B、C三個(gè)組件的onStartShouldSetResponder都返回為true，那么只有C組件會(huì)得到響應(yīng)成為響應(yīng)者。這種機(jī)制才能保證界面所有的組件都能得到正確的響應(yīng)。但是有些情況下，父組件可能需要處理事件，RN提供了一個(gè)劫持機(jī)制，也就是在觸摸事件往下傳遞的時(shí)候，先詢問(wèn)父組件是否需要劫持，不給子組件傳遞事件，也就是如下兩個(gè)回調(diào)：

• View.props.onStartShouldSetResponderCapture：這個(gè)屬性接收一個(gè)回調(diào)函數(shù)，函數(shù)的原型是function(evt): bool，在觸摸事件開始(touchDown)的時(shí)候，RN容器組件會(huì)回調(diào)函數(shù)，詢問(wèn)組件是否要劫持事件，如果返回true，表示需要劫持
• View.props.onMoveShouldSetResponderCapture：與之前類似，不過(guò)是在觸摸事件詢問(wèn)容器是否是劫持

Paste_Image.png

4.回調(diào)函數(shù)總結(jié)

• onStartShouldSetPanResponder: (e, gestureState) => bool
• onStartShouldSetPanResponder: (e, gestureState) => bool
• onMoveShouldSetPanResponder: (e, gestureState) => bool
• onMoveShouldSetPanResponderCapture: (e, gestureState) => bool
• onPanResponderReject: (e, gestureState) => {...}
• onPanResponderGrant: (e, gestureState) => {...}
• onPanResponderStart: (e, gestureState) => {...}
• onPanResponderEnd: (e, gestureState) => {...}
• onPanResponderRelease: (e, gestureState) => {...}
• onPanResponderMove: (e, gestureState) => {...}
• onPanResponderTerminate: (e, gestureState) => {...}
• onPanResponderTerminateRequest: (e, gestureState) => {...}
• onShouldBLockNativeResponder: (e, gestureState) => bool

可以看到，這些接口與前面接收的基礎(chǔ)回調(diào)基本上是一一對(duì)應(yīng)的，其功能也是類似，這里就不再贅述。這里有一個(gè)特別的回調(diào) onShouldBlockNativeResponder
表示是否用 Native 平臺(tái)的事件處理，默認(rèn)是禁用的，全部使用 JS 中的事件處理，注意此函數(shù)目前只能在 Android 平臺(tái)上使用