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
相关产品推荐
相关产品推荐

