You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

React Navigation Drawer滑动打开后自动回弹关闭问题求助

解决方案

按如下步骤排查调整即可修复滑动回弹问题:

  • 修正路由重名冲突:你当前Stack导航承载Drawer的路由命名为Home,Drawer内部的初始路由也命名为Home,同名路由会导致导航器手势事件匹配混乱,将Stack层的Drawer容器路由重命名为DrawerRoot之类的唯一名称即可。
  • 禁用父Stack路由的横向手势:你给Stack层的Drawer容器路由配置了horizontalAnimation,该动画自带的横向滑动返回手势会和Drawer的滑动打开手势产生冲突,给该路由新增手势禁用配置:
<Stack.Screen 
  name="DrawerRoot" 
  component={DrawerNav} 
  options={{
    ...horizontalAnimation,
    gestureEnabled: false
  }}
/>
  • 补全Drawer手势明确配置:如果调整后问题仍存在,给Drawer.Navigator补充手势相关配置,指定响应范围:
<Drawer.Navigator 
  initialRouteName="Home" 
  screenOptions={{
    gestureEnabled: true,
    swipeEdgeWidth: 50,
    // 保留你原有其他配置不变
    headerShown: true,
    headerStyle: {
      backgroundColor: brand,
    },
    headerTintColor: primary,
    headerTransparent: false,
    headerTitle: '',
    headerLeftContainerStyle: {
      paddingLeft: 20,
    },
}}>
  • 检查依赖版本一致性:确认@react-navigation/native、@react-navigation/drawer、@react-navigation/stack三个依赖的大版本一致,没有跨版本混用的情况,版本不匹配也会导致手势响应异常。

内容的提问来源于stack exchange,提问作者CYW

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.04 11:06:01