Android端与Native UI组件交互时Expo router出现随机跳转问题

可能的原因 #

• 触摸事件冲突：Android原生组件的触摸事件未正确消费，导致事件冒泡到上层React Navigation容器，被误判为导航触发操作——哪怕是简单的FrameLayout，只要没处理触摸事件，都可能触发这个问题。
• Expo构建的Native层特殊处理：Expo在Android打包时对原生组件的事件转发机制和纯React Native项目存在差异，可能存在未预期的事件传递逻辑。
• 导航手势误识别：如果使用了React Navigation的滑动返回、抽屉手势，原生组件的触摸动作可能被手势识别器误判，触发随机路由跳转。

排查&解决步骤 #

1. 让原生组件消费触摸事件
   在你的FrameLayout（或自定义原生组件）里重写触摸事件方法，阻止事件向上传递：

   @Override
   public boolean onTouchEvent(MotionEvent event) {
       // 消费所有触摸事件，不让上层视图接收
       return true;
   }
   
   @Override
   public boolean onInterceptTouchEvent(MotionEvent event) {
       // 不拦截子组件的触摸事件，但自身消费事件
       return false;
   }
   

2. 临时禁用导航手势验证
   在路由配置里关掉所有导航手势，验证问题是否消失：

   const Stack = createStackNavigator();
   function AppNavigator() {
     return (
       <Stack.Navigator
         screenOptions={{
           gestureEnabled: false, // 禁用滑动返回手势
         }}
       >
         {/* 你的路由页面配置 */}
       </Stack.Navigator>
     );
   }
   

   如果问题解决，说明是手势和原生组件的冲突，后续可以只给包含原生组件的页面禁用手势，或者调整手势触发区域。

3. 对比纯RN项目复现问题
   把你的原生组件放到纯React Native项目（非Expo）里测试，如果问题不出现，那大概率是Expo的构建机制导致的，可以检查Expo模块的注册逻辑是否符合规范，或者升级到最新Expo SDK版本试试。

4. 追踪事件传递路径
   在Android Studio用Layout Inspector查看视图层级，同时给原生组件的触摸方法、React Navigation的导航逻辑添加日志，确认事件是否被错误转发到了导航组件。

额外提示 #

• 确保你的Expo SDK是最新稳定版，旧版本可能存在原生事件处理的bug。
• 如果使用了react-native-gesture-handler，确认GestureHandlerRootView已经正确包裹整个App，避免手势层级混乱。

内容的提问来源于stack exchange，提问作者Thomas Berthaud