Expo Router在Android端导航异常：需点击两次按钮才可跳转页面

兄弟，我之前开发时也踩过几乎一模一样的坑！Android上得点两次按钮才触发导航，iOS一次就正常，这种情况大概率是手势冲突或者触摸事件被父视图拦截了，尤其是你用了BottomSheetView+GestureHandlerRootView的组合，Android的触摸事件传递机制本来就和iOS有差异，很容易出这种问题。

我给你几个亲测有效的解决思路，你挨个试试：

• 给按钮加pointerEvents="box-only"属性
  这是最直接的解决方案，能让按钮优先抢占触摸事件，不让BottomSheet的手势识别器先“吃掉”点击。代码示例：

  <Button 
    onPress={() => router.push('/your-next-screen')} 
    pointerEvents="box-only"
  >
    跳转到下一页
  </Button>
  `pointerEvents="box-only"`的作用是让组件只响应自身范围内的触摸事件，不会把事件传递给父视图的手势处理逻辑，完美适配这种场景。
  
  

• 阻止触摸事件冒泡到父视图
  如果上面的方法没生效，你可以在按钮外层包个TouchableWithoutFeedback，手动阻止事件往上传递给BottomSheet：

  import { TouchableWithoutFeedback } from 'react-native';
  
  <TouchableWithoutFeedback 
    onPress={(e) => {
      e.stopPropagation(); // 阻止事件冒泡
      router.push('/your-next-screen');
    }}
  >
    <Button>跳转到下一页</Button>
  </TouchableWithoutFeedback>
  

  这样BottomSheet的拖拽手势就不会拦截到按钮的点击事件了。

• 检查BottomSheet的手势配置
  如果你用的是@gorhom/bottom-sheet这类库，看看是不是开启了enablePanDownToClose这类全局手势，可能和按钮的点击区域有重叠。你可以试试调整touchHandleHeight，把触摸手柄的高度调小，确保按钮不在手势识别范围内；或者给BottomSheet设置enabledGestures，关闭和按钮区域冲突的手势。

• 确认GestureHandlerRootView的层级
  一定要保证GestureHandlerRootView是整个App的最外层容器，不能在BottomSheet里面再嵌套其他GestureHandler相关的视图，Android对这种手势容器的层级敏感度比iOS高很多，嵌套错了很容易出事件传递问题。比如你的根布局应该是这样的：

  import { GestureHandlerRootView } from 'react-native-gesture-handler';
  import { Stack } from 'expo-router';
  
  export default function RootLayout() {
    return (
      <GestureHandlerRootView style={{ flex: 1 }}>
        <Stack />
      </GestureHandlerRootView>
    );
  }
  

我当时用第一个方法就解决问题了，你先试试这个，不行再往下排查。

备注：内容来源于stack exchange，提问作者Eric Uche