网站首页布局设计教程,企业网页设计论文,虎鲸微信管理系统,成都私人网站制作ReactNative触摸事件处理 对RN触摸事件的捕获与冒泡机制的理解 组件A、B、C结构 组件A组件B组件C 捕获、冒泡机制 sequenceDiagram
A-A: 是否捕获#xff1f;若是则停止向下一级传递
A-B:
B-B: 是否捕获#xff1f;若是则停止向下一级传递
B-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 上的控制中心消息中心 转载于:https://www.cnblogs.com/foxNike/p/11119204.html