react native 觸摸事件

參考于這篇文章: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 數組,多點觸摸的時候,包含當前所有觸摸點的事件。
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容