ReactNative 触摸事件处理

ReactNative触摸事件处理

对RN触摸事件的捕获与冒泡机制的理解

组件A、B、C结构

组件A组件B组件C

捕获、冒泡机制

sequenceDiagram
A->>A: 是否捕获？若是则停止向下一级传递
A->>B: 
B->>B: 是否捕获？若是则停止向下一级传递
B->>C: 
C->>C: 是否捕获？若是则停止向下一级传递
C->>C: 是否声明成为响应者？无论是否，都冒泡。
C->>B: 
B->>B: 是否声明成为响应者？无论是否，都冒泡。
B->>A: 
A->>A: 是否声明成为响应者？

捕获期可通过onStartShouldSetResponderCapture 或 onMoveShouldSetResponderCapture回调决定是否阻止事件往下级组件传递。

冒泡期可通过onStartShouldSetResponder或onMoveShouldSetPanResponder回调决定是否成为响应者。若上级组件与下级组件都返回true，则下级组件成为当前触摸事件的响应者。（层级越深的组件优先级越高）

补充：

react-native Touch事件的拦截与分发

RN如何处理触摸事件

View组件的pointerEvents属性

用于控制当前视图是否可以作为触控事件的目标。

• auto：视图可以作为触控事件的目标。
• none：视图不能作为触控事件的目标。
• box-none：视图自身不能作为触控事件的目标，但其子视图可以。

View组件可用的手势

onTouchStart={()=>console.log('start')}
onTouchMove={()=>console.log('move')}
onTouchEnd={()=>console.log('end')}

PanResponder 手势监视器

// 创建监视器
this.panResponder = PanResponder.create({onStartShouldSetPanResponder: ()=>{},...
})// 在View中使用
<View{...this.panResponder}
/>

事件参数

每个事件都有两个返回参数nativeEvent, gestureState

nativeEvent包含以下属性

changedTouches - 在上一次事件之后，所有发生变化的触摸事件的数组集合（即上一次事件后，所有移动过的触摸点）
identifier - 触摸点的 ID
locationX - 触摸点相对于父元素的横坐标（实践证明不好用，值会突变！原因未知）
locationY - 触摸点相对于父元素的纵坐标（实践证明不好用，值会突变！）
pageX - 触摸点相对于根元素的横坐标
pageY - 触摸点相对于根元素的纵坐标
target - 触摸点所在的元素 ID
timestamp - 触摸事件的时间戳，可用于移动速度的计算
touches - 当前屏幕上的所有触摸点的集合

gestureState包含以下属性:

stateID 此次触摸事件的ID
moveX 最近一次移动的屏幕坐标
moveY
x0 响应器产生时的屏幕坐标（手势第一个坐标）
y0
dx 触摸开始累积的横向路程
dy
vx 当前的横向移动速度
vy
numberActiveTouches 触摸点数量

事件生命周期

单点事件

onStartShouldSetResponderCapture 如果父视图想要阻止子视图响应 touch start 事件，它就应该设置这个方法并返回 true。

onStartShouldSetResponder 在用户开始触摸的时候（手指刚刚接触屏幕的瞬间），返回是否愿意成为响应者

onPanResponderGrant 这个视图开始响应触摸事件。此时需要高亮告诉用户正在响应。

onPanResponderStart 触摸事件正式被监视

onPanResponderEnd 触摸事件结束

onPanResponderRelease 在整个触摸事件结束时调用这个函数。

移动事件

onMoveShouldSetResponderCapture 如果父视图想要阻止子视图响应 touch move 事件时，它就应该设置这个方法并返回 true

onMoveShouldSetPanResponder 这个视图想要“认领”这个 touch move 事件吗？每当有 touch move 事件在这个视图中发生，并且这个视图没有被设置为这个 touch move 的响应时，这个函数就会被调用。

onPanResponderGrant 监视器发出通知开始工作

onPanResponderMove 当用户正在屏幕上移动手指时调用这个函数。

异常事件

onPanResponderReject 有一个响应器正处于活跃状态，并且不会向另一个要求响应这个事件的视图释放这个事件。

onPanResponderTerminationRequest 其他某个视图想要成为事件的响应者，并要求这个视图放弃对事件的响应时，就会调用这个函数。如果允许释放响应，就返回true。

onPanResponderTermination 响应被从这个视图上“劫走”了。可能是在调用了 onResponderTerminationRequest 之后，被另一个视图“劫走”了（见 onresponderterminationrequest), 也可能是由于 OS 无条件终止了响应（比如说被 iOS 上的控制中心／消息中心）