1.RN的基本觸摸事件
RN的組件除了TextInput蜈抓、ScrollView（ListView）外赊瞬，默認(rèn)是不支持點(diǎn)擊事件拯勉，也不能響應(yīng)基本觸摸事件豹障，所以RN中提供了幾個直接處理響應(yīng)事件的組件蚁滋，TouchableHighlight宿接，TouchableNativeFeedback赘淮，TouchableOpacity和TouchableWidthoutFeedback。這四個Touch類組件有如下回調(diào)方法：
- onPressIn: 點(diǎn)擊開始
- onPressOut: 點(diǎn)擊結(jié)束或者離開
- onPress: 單擊事件回調(diào)
- onLongPress: 長按事件回調(diào)
以TouchableOpacity使用為例：
<TouchableHighlight
onPressIn={() => console.log("onPressIn")}
onPressOut={() => console.log("onPressOut")}
onPress={() => console.log("onPress")}
onLongPress={() => console.log("onLongPress")}/>
2.單組件觸摸事件處理
單個組件的單次操作交互處理的生命周期如下：
在整個事件中睦霎，組件可以在非事件響應(yīng)者和事件響應(yīng)者中切換身份
非事件響應(yīng)者
默認(rèn)情況下梢卸，觸摸事件輸入不會直接傳遞給組件，不能進(jìn)行事件響應(yīng)處理副女，也就是非事件響應(yīng)者蛤高。如果組件要進(jìn)行觸摸事件處理，首先要申請成為事件響應(yīng)者碑幅，組件有如下兩個屬性可以做這樣的申請：
- View.props.onStartShouldSetResponder戴陡，這個屬性接收一個回調(diào)函數(shù)，函數(shù)原型是function(evt): bool沟涨，在觸摸事件開始(touchDown)的時候恤批，RN會回調(diào)此函數(shù)，詢問組件是否需要成為事件響應(yīng)者拷窜，接收事件處理开皿，如果返回true，表示需要成為響應(yīng)者
- View.props.onMoveShouldSetResponder篮昧，它和前一個屬性類似赋荆，不過這是觸摸，是進(jìn)行過程中(touchMove)懊昨，RN詢問組件是否要成為響應(yīng)者窄潭，返回true表示想要成為響應(yīng)者
假如組件通過上面的方法反回了true，表示發(fā)出了申請要成為事件響應(yīng)者酵颁，想要接收后續(xù)的事件輸入嫉你。因為同一時刻，只能有一個事件處理響應(yīng)者躏惋，RN還需要協(xié)調(diào)所有組件的事件處理請求幽污，所以不是每個組件申請都能成功，RN通過如下兩個回調(diào)來通知告訴組件它的申請結(jié)果：
- View.props.onResponderGrant: (evt) => {}：表示申請成功簿姨，組件成為了事件處理響應(yīng)者距误，這時組件就開始接收后序的觸摸事件輸入。一般情況下扁位，這時開始准潭，組件進(jìn)入了激活狀態(tài)，并進(jìn)行一些事件處理或者手勢識別的初始化域仇。
- View.props.onResponderReject: (evt) => {}：表示申請失敗了刑然，這意味著其他組件正在進(jìn)行事件處理，并且它不想放棄事件處理暇务，所以你的申請被拒絕了泼掠，后續(xù)輸入事件不會傳遞給本組件進(jìn)行處理怔软。
事件響應(yīng)者
如果通過上面的步驟，組件申請成為了事件響應(yīng)者武鲁，后緒的事件輸入都會通過回調(diào)函數(shù)通知到組件：
- View.props.onResponderStart: (evt) => {}：表示手指按下時爽雄，成功申請為事件響應(yīng)者的回調(diào)
- View.props.onResponderMove: (evt) => {}：表示觸摸手指移動的事件，這個回調(diào)非常頻繁沐鼠，所以這個回調(diào)函數(shù)的內(nèi)容需要盡量簡單
- View.props.onResponderRelease: (evt) => {}：表示觸摸完成(touchUp)時候的回調(diào)挚瘟，表示用戶完成了本次的觸摸交互，這里應(yīng)該完成手勢識別的處理饲梭，這以后乘盖，組件不再是事件響應(yīng)者，組件取消激活
- View.props.onResponderEnd: (evt) => {}：表示組件結(jié)束事件響應(yīng)的回調(diào)
在上面的圖中也可以看到憔涉，在組件成為事件響應(yīng)者期間订框，其他組件也可能會申請觸摸事件處理。此時RN會通過回調(diào)詢問是否可以讓出響應(yīng)者角色兜叨〈┌猓回調(diào)如下：
- View.props.onResponderTerminationRequest: (evt) => bool
如果回調(diào)函數(shù)返回為true，則表示同意釋放響應(yīng)者角色国旷，同時會回調(diào)如下函數(shù)矛物，通知組件事件響應(yīng)處理被終止了：
- View.props.onResonderTerminate: (evt) => {}
這個回調(diào)也會發(fā)生在系統(tǒng)直接終止組件的事件處理，例如用戶在觸摸操作過程中跪但，突然來電話的情況履羞。
事件數(shù)據(jù)結(jié)構(gòu)
之前的事件處理函數(shù)只寫了一個參數(shù)，實際上有兩個參數(shù)屡久，一個是nativeEvent（原生事件）忆首；另一個是gestureState（手勢狀態(tài)）
原生事件有以下成員變量：
- identifier：觸摸的ID，一般對應(yīng)手指被环，在多點(diǎn)觸控的時候糙及，用來區(qū)分哪個手指的觸摸事件；
- locationX和locationY：觸摸點(diǎn)相對父元素的坐標(biāo)
- pageX和pageY：觸摸點(diǎn)相對屏幕的坐標(biāo)
- timestamp：當(dāng)前觸摸的事件的時間戳筛欢，可以用來進(jìn)行滑動計算
- target：接收當(dāng)前觸摸事件的組件ID
- changedTouches：evt數(shù)組浸锨，叢上次回調(diào)上報的觸摸事件，到這次上報之間的所有事件數(shù)組悴能。因為用戶觸摸過程中揣钦，會產(chǎn)生大量事件雳灾，有時候可能沒有及時上報漠酿，系統(tǒng)用這種方式批量上報；
- touches：evt數(shù)組谎亩，多點(diǎn)觸摸的時候炒嘲，包含當(dāng)前所有觸摸點(diǎn)的事件
由于RN沒有多點(diǎn)觸控的概念宇姚，所以有些屬性是不能用的，最常用的是locationX和locationY數(shù)據(jù)夫凸，需要注意的是浑劳，因為這里是Native的數(shù)據(jù)，所以他們的單位是實際像素夭拌。如果要轉(zhuǎn)換為RN的邏輯單位魔熏，可以使用如下方式：
let pX = evt.nativeEvent.locationX / PixelRatio.get();
3.嵌套組件事件處理
前面也提到過，當(dāng)組件需要作為事件處理響應(yīng)者時鸽扁，需要通過onStartShouldSetResponder或者onMoveShouldSetResponder回調(diào)返回true來申請蒜绽。加入當(dāng)多個組件嵌套的時候，這兩個回調(diào)都反回了true的時候桶现，但是同一個只能有一個事件處理響應(yīng)者躲雅，這種情況如何處理？假設(shè)有如下布局：
在RN中骡和，默認(rèn)情況下使用冒泡機(jī)制相赁，最深的組件最先開始響應(yīng)，所以前面描述的情況慰于，若A钮科、B、C三個組件的onStartShouldSetResponder都返回為true东囚，那么只有C組件會得到響應(yīng)成為響應(yīng)者跺嗽。這種機(jī)制才能保證界面所有的組件都能得到正確的響應(yīng)。但是有些情況下页藻，父組件可能需要處理事件桨嫁，RN提供了一個劫持機(jī)制，也就是在觸摸事件往下傳遞的時候份帐，先詢問父組件是否需要劫持璃吧，不給子組件傳遞事件，也就是如下兩個回調(diào)：
- View.props.onStartShouldSetResponderCapture：這個屬性接收一個回調(diào)函數(shù)废境，函數(shù)的原型是function(evt): bool畜挨，在觸摸事件開始(touchDown)的時候，RN容器組件會回調(diào)函數(shù)噩凹，詢問組件是否要劫持事件巴元，如果返回true，表示需要劫持
- View.props.onMoveShouldSetResponderCapture：與之前類似驮宴，不過是在觸摸事件詢問容器是否是劫持
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)基本上是一一對應(yīng)的，其功能也是類似堵泽，這里就不再贅述修己。這里有一個特別的回調(diào) onShouldBlockNativeResponder
表示是否用 Native 平臺的事件處理恢总，默認(rèn)是禁用的，全部使用 JS 中的事件處理睬愤，注意此函數(shù)目前只能在 Android 平臺上使用
