React Navigation v7抽屉导航点击菜单按钮重置导航栈失效问题排查

看起来你遇到了React Navigation v7抽屉导航里的栈重置难题——点击菜单切换页面后，初始的Screen1始终赖在导航栈底部，没法完全清空栈只保留当前目标页面。我来帮你捋捋问题出在哪，再给你个可行的解决方案。

问题分析 #

你当前用CommonActions.reset配合dispatch来尝试重置栈，但这里可能踩了个小坑：在抽屉导航的上下文里，手动指定key: null可能没正确定位到抽屉导航这个导航器本身，导致重置操作没有按预期覆盖整个栈。而且React Navigation其实提供了更简洁可靠的navigation.reset方法，比手动dispatch Action更适配当前导航器的上下文。

解决方案 #

修改你的changeScreen函数，把手动dispatch的方式换成直接调用props.navigation.reset，同时优化依赖项避免不必要的重渲染：

const changeScreen = useCallback(
  (screen) => {
    const currentScreenIndex = props.state.index;
    const routes = props.state.routes;
    const currentScreen = routes[currentScreenIndex];
    
    if (currentScreen.name !== screen) {
      // 用navigation.reset替代CommonActions.reset的dispatch调用
      props.navigation.reset({
        index: 0,
        routes: [{ name: screen }],
      });
    } else {
      props.navigation.closeDrawer();
    }
  },
  [props.navigation, props.state] // 只保留必要的依赖项
);

为什么这样有效？ #

navigation.reset方法会自动识别当前所在的导航器（也就是你的抽屉导航），精准地把整个栈替换成你指定的单个页面，不会再保留初始的Screen1。另外优化useCallback的依赖项，能避免组件不必要的重渲染，提升性能。

你可以修改后打印props.state.routes（React Navigation里routes才是当前栈的真实内容）验证一下，正常情况下应该只会看到当前选中页面的route对象。如果还是有问题，再检查下ScreenWrapper组件有没有嵌套额外的导航逻辑，但根据你的描述，它只是渲染全局按钮，应该不会影响。

内容来源于stack exchange