react-native中TouchableXXX事件的分發

  1. RN 基本觸摸組件
    RN 的組件除了 Text,其他組件默認是不支持點擊事件,也不能響應基本觸摸事件,所以 RN 中提供了幾個直接處理響應事件的組件,基本上能夠滿大部分的點擊處理需求TouchableHighlight, TouchableNativeFeedback, TouchableOpacity 和 TouchableWithoutFeedback。因爲這幾個組件的功能和使用方法基本類似,只是 Touch 的反饋效果不一樣,所以一般我們用 Touchable** 代替。

  2. 單組件觸摸事件處理
    RN 的組件默認不進行處理觸摸事件。組件要處理觸摸事件,首先要“申請”成爲摸事件的響應者(Responder),完成事件處理以後,會釋放響應者的角色。一個觸摸事件處理週期,是從用戶手指按下屏幕,到用戶擡起手指擡起結束,這是用戶的一次完整觸摸操作。

這裏寫圖片描述
我們來詳細分析一下事件處理的生命週期,在整個事件處理的過程中,組件有可能處於兩種身份中的一種,並且可以相互切換:非事件響應者和事件響應者。

非事件響應者

默認情況下,觸摸事件輸入不會直接傳遞給組件,不能進行事件響應處理,也就是非事件響應者。如果組件要進行觸摸事件處理,首先要申請成爲事件響應者,組件有如下兩個屬性可以做這樣的申請:

View.props.onStartShouldSetResponder,這個屬性接收一個回調函數,函數原型是 function(evt): bool,在觸摸事件開始(touchDown)的時候,RN 會回調此函數,詢問組件是否需要成爲事件響應者,接收事件處理,如果返回 true,表示需要成爲響應者;
假如組件通過上面的方法返回了 true,表示發出了申請要成爲事件響應者請求,想要接收後續的事件輸入。因爲同一時刻,只能有一個事件處理響應者,RN 還需要協調所有組件的事件處理請求,所以不是每個組件申請都能成功,RN 通過如下兩個回調來通知告訴組件它的申請結果。

View.props.onResponderGrant: (evt) => {}:表示申請成功,組件成爲了事件處理響應者,這時組件就開始接收後序的觸摸事件輸入。一般情況下,這時開始,組件進入了激活狀態,並進行一些事件處理或者手勢識別的初始化。

View.props.onResponderReject: (evt) => {}:表示申請失敗了,這意味者其他組件正在進行事件處理,並且它不想放棄事件處理,所以你的申請被拒絕了,後續輸入事件不會傳遞給本組件進行處理。

事件響應者

如果通過上面的步驟,組件申請成爲了事件響應者,後續的事件輸入都會通過回調函數通知到組件,如下:

View.props.onResponderMove: (evt) => {}:表示觸摸手指移動的事件,這個回調可能非常頻繁,所以這個回調函數的內容需要儘量簡單;

View.props.onResponderTerminationRequest: (evt) => bool:從前面的圖中也看到,在組件成爲事件響應者期間,其他組件也可能會申請觸摸事件處理。此時 RN 會通過回調詢問你是否可以釋放響應者角色讓給其他組件。

View.props.onResponderTerminate: (evt) => {}:這個回調也會發生在系統直接終止組件的事件處理,例如用戶在觸摸操作過程中,突然來電話的情況。

View.props.onResponderRelease: (evt) => {}:表示觸摸完成(touchUp)的時候的回調,表示用戶完成了本次的觸摸交互,這裏應該完成手勢識別的處理,這以後,組件不再是事件響應者,組件取消激活。

測試結果:

Android:

1.點擊事件
這裏寫圖片描述

2.點擊之後滾動頻幕
這裏寫圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章