HarmonyOS 鸿蒙Next中BLOCK_HIERARCHY导致RN手势不响应

HarmonyOS 鸿蒙Next中BLOCK_HIERARCHY导致RN手势不响应 给 PanResponder 组件的子组件设置了HitTestMode.HTM_BLOCK_HIERARCHY相关属性会阻止RN根节点touch下发,最终导致手势不响应。

4 回复

要回答这个问题我们首先要知道RN中onPress等与触摸相关事件的触发机制。

很多人可能会直观地认为每个onPress背后都会在当前组件对应的native节点上绑定一个onTouch或者onClick事件,因此觉得只要当前组件对应的native节点能响应触摸,手势或者onPress就应该能响应。

然而,实际上的实现并非如此。在RN中,onPress等与触摸相关事件的触发机制是这样的:

  1. 在native端,只有RN的根组件(即RootView)上绑定了一个onTouch事件;
  2. 当用户触摸屏幕时,RootView会收到系统发过来的TouchEvent;
  3. 在onTouch的回调中,RN会根据TouchEvent的触摸点计算出JS侧应该由哪个组件(即TouchTarget)来消费当前TouchEvent;
  4. 然后执行绑定在该组件上的onPress等相关事件。

接下来我们结合问题中的案例来正面回答这个问题。

preview

如上图,为了形象,我画了一张组件布局,左边是组件布局,右边是立体层级结构。在这个案例中,我们将自定义组件的hitTestBehavior属性设置成HitTestMode.BLOCK_HIERARCHY,根据BLOCK_HIERARCHY的定义,当触摸自定义组件时会出现下面的结果:

  • 自定义组件自身及子节点(TextInput和CustomNode*(TouchableOpacity对应的native侧节点)*)能响应触摸;
  • 如果触摸点落在TextInput位置,键盘将会弹起;
  • 如果触摸点落在TouchableOpacity的位置,则不会有任何反应。因为TouchableOpacity对应的CustomNode节点上并没有绑定任何触摸相关的事件;同时绑定在TouchableOpacity上的onPress等触摸事件也不会执行,原因见下文;
  • 自定义组件的兄弟节点和父节点(CustomNode*(View对应的native侧节点)和StackNode(RootView对应的native侧节点)*)不能响应触摸;
  • 绑定在RootView对应的StackNode节点上的onTouch事件回调不会收到系统发过来的TouchEvent,因此上面的机制将在2处中断,JS侧都不会收到也不会执行触摸相关的事件

更多关于HarmonyOS 鸿蒙Next中BLOCK_HIERARCHY导致RN手势不响应的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


我申请一次没通过呐,不知什么原因

在HarmonyOS Next中,BLOCK_HIERARCHY机制会阻止React Native手势事件在组件层级间传递。该机制默认拦截手势冲突,导致RN组件无法接收触摸事件。需检查组件树结构,确认是否存在嵌套手势容器。可通过调整组件层级或使用手势透传属性解决事件阻塞。具体需在RN手势容器设置相关事件处理参数,确保手势识别不被父级拦截。

在HarmonyOS Next中,HitTestMode.HTM_BLOCK_HIERARCHY属性确实会阻止触摸事件向子组件传递,导致React Native(RN)的PanResponder手势无法响应。这是因为该模式会中断事件冒泡,使RN根节点无法接收触摸事件。

建议检查以下两点:

  1. 确认是否必须使用BLOCK_HIERARCHY模式,如非必要可改用其他HitTestMode选项。
  2. 若需保留该模式,考虑在组件层级中调整事件处理逻辑,确保手势事件能正确传递到RN组件。

该问题通常源于事件传递链的中断,需要平衡鸿蒙原生事件机制与RN手势库的兼容性。

回到顶部