參考于這篇文章:url:http://www.tuicool.com/articles/IreaYfv
我此次遇到的問題主要是想要點擊屏幕上某組件時,觸摸事件發生的位置:
觸控是移動設備的核心功能,也移動應用交互的基礎,Android 和 iOS 各自都有完善的觸摸事件處理機制。React Native(以下簡稱 RN)提供了一套統一的處理方式,能夠方便的處理界面中組件的觸摸事件、用戶手勢等。本文嘗試介紹 RN 中觸摸事件處理。
觸摸事件處理的回調都會有一個 evt 參數,我們可以 console.log 一下看看它的數據結構:
圖片.png
里面包含了很多信息,其中就包括觸摸事件數據 nativeEvent, nativeEvent 詳細內容如下:
圖片.png
可以看到,位置信息就在這里面。這里我們就詳細了解一下:
- identifier :觸摸的 ID,一般對應手指,在多點觸控的時候,用來區分是哪個手指的觸摸事件;
- locationX 和 locationY :觸摸點相對組件的位置;
- pageX 和 pageY :觸摸點相對于屏幕的位置;
- timestamp :當前觸摸的事件的時間戳,可以用來進行滑動計算;
- target :接收當前觸摸事件的組件 ID;
- changedTouches :evt 數組,從上次回調上報的觸摸事件,到這次上報之間的所有事件數組。因為用戶觸摸過程中,會產生大量事件,有時候可能沒有及時上報,系統用這種方式批量上報;
- touches :evt 數組,多點觸摸的時候,包含當前所有觸摸點的事件。