【React Native】文件翻譯閱讀紀錄 - 指南 - 手勢響應系統
 |
| Facebook Open Source React Native |
手勢響應系統
手勢響應系統管理應用程序中手勢的生命週期。當應用確定用戶的意圖時，觸摸可以經歷幾個階段。例如，應用程序需要確定觸摸是滾動，在窗口小部件上滑動還是點擊。這甚至可以在觸摸期間改變。也可以有多個同時觸摸。
需要觸摸響應器系統以允許組件協商這些觸摸交互，而無需關於其父或子組件的任何附加知識。
需要觸摸響應器系統以允許組件協商這些觸摸交互，而無需關於其父或子組件的任何附加知識。
最佳實踐
為了讓您的應用感覺良好，每個操作都應具有以下屬性：
- 反饋/突出顯示 - 向用戶顯示處理觸摸的內容，以及釋放手勢時會發生什麼
- 取消能力 - 在進行動作時，用戶應該能夠通過拖動手指來觸摸中途
這些功能使用戶在使用應用程序時更加舒適，因為它允許人們進行實驗和交互，而不必擔心會出錯。
TouchableHighlight and Touchable*
響應者係統可能很複雜。因此，我們為應該“可點擊”的事物提供了一個抽象的Touchable實現。這使用響應器系統，並允許您以聲明方式輕鬆配置抽頭交互。在任何可以使用網絡上的按鈕或鏈接的地方使用TouchableHighlight。
Responder 生命週期
通過實施正確的協商方法，視圖可以成為觸摸響應者。有兩種方法可以詢問視圖是否要成為響應者：
View.props.onStartShouldSetResponder: (evt) => true,- 此視圖是否希望在觸摸開始時成為響應者？View.props.onMoveShouldSetResponder: (evt) => true,- 當視圖不是響應者時，調用View上的每次觸摸移動：此視圖是否要“聲明”觸摸響應？
如果View返回true並嘗試成為響應者，則會發生以下情況之一：
View.props.onResponderGrant: (evt) => {}- The View 正在響應觸摸事件。現在是時候突出顯示並向用戶顯示正在發生的事情View.props.onResponderReject: (evt) => {}- 其他東西現在是響應者，不會釋放它
如果視圖正在響應，則可以調用以下處理程序：
View.props.onResponderMove: (evt) => {}- 用戶正在移動他們的手指View.props.onResponderRelease: (evt) => {}- 在觸摸結束時觸發，即“touchUp”View.props.onResponderTerminationRequest: (evt) => true-其他東西想成為響應者。該視圖是否應該釋放響應者？返回true允許釋放View.props.onResponderTerminate: (evt) => {}- 響應者已從視圖中刪除。調用onResponderTerminationRequest之後可能會被其他視圖佔用，或者操作系統可能會在沒有詢問的情況下採取其他視圖（在iOS上的控制中心/通知中心發生）
evt 是一個合成觸摸事件，具有以下形式：nativeEventchangedTouches- 自上次事件以來已更改的所有觸摸事件的數組identifier-觸摸的IDlocationX- 觸摸的X位置，相對於元素locationY- 觸摸的Y位置，相對於元素pageX- 觸摸的X位置，相對於根元素pageY- 觸摸的Y位置，相對於根元素target- 接收觸摸事件的元素的節點IDtimestamp- 觸摸的時間標識符，用於速度計算touches- 屏幕上所有當前觸摸的數組
捕獲ShouldSet處理程序
使用冒泡模式調用 onStartShouldSetResponder 和 onMoveShouldSetResponder，其中首先調用最深的節點。這意味著當多個Views為 *ShouldSetResponder 處理程序返回true時，最深的組件將成為響應者。在大多數情況下，這是可取的，因為它確保所有控件和按鈕都可用。
但是，有時父母會希望確保它成為響應者。這可以通過使用捕獲階段來處理。在響應者係統從最深的組件冒泡之前，它將執行捕獲階段，觸發 *ShouldSetResponderCapture。因此，如果父View想要阻止子進入觸摸開始的響應者，它應該有一個返回 true 的onStartShouldSetResponderCapture 處理程序。
但是，有時父母會希望確保它成為響應者。這可以通過使用捕獲階段來處理。在響應者係統從最深的組件冒泡之前，它將執行捕獲階段，觸發 *ShouldSetResponderCapture。因此，如果父View想要阻止子進入觸摸開始的響應者，它應該有一個返回 true 的onStartShouldSetResponderCapture 處理程序。
View.props.onStartShouldSetResponderCapture: (evt) => true,View.props.onMoveShouldSetResponderCapture: (evt) => true,
0 意見