参考于这篇文章:url:http://www.tuicool.com/articles/IreaYfv
我此次遇到的问题主要是想要点击屏幕上某组件时,触摸事件发生的位置:
触控是移动设备的核心功能,也移动应用交互的基础,Android 和 iOS 各自都有完善的触摸事件处理机制。React Native(以下简称 RN)提供了一套统一的处理方式,能够方便的处理界面中组件的触摸事件、用户手势等。本文尝试介绍 RN 中触摸事件处理。
触摸事件处理的回调都会有一个 evt 参数,我们可以 console.log 一下看看它的数据结构:
里面包含了很多信息,其中就包括触摸事件数据 nativeEvent, nativeEvent 详细内容如下:
可以看到,位置信息就在这里面。这里我们就详细了解一下:
- identifier :触摸的 ID,一般对应手指,在多点触控的时候,用来区分是哪个手指的触摸事件;
- locationX 和 locationY :触摸点相对组件的位置;
- pageX 和 pageY :触摸点相对于屏幕的位置;
- timestamp :当前触摸的事件的时间戳,可以用来进行滑动计算;
- target :接收当前触摸事件的组件 ID;
- changedTouches :evt 数组,从上次回调上报的触摸事件,到这次上报之间的所有事件数组。因为用户触摸过程中,会产生大量事件,有时候可能没有及时上报,系统用这种方式批量上报;
- touches :evt 数组,多点触摸的时候,包含当前所有触摸点的事件。