React-Navigation/Drawer 6中如何正确实现goBack返回上一页功能

问题根因 #

v6版本对Drawer导航的navigation对象作用域做了调整，你在Drawer.Screen的header参数中拿到的navigation是抽屉导航器自身的实例，而非嵌套在Drawer页面内部的子导航栈实例。直接调用navigation.goBack()时只会触发抽屉层级的回退逻辑，默认会直接回到抽屉的初始路由页面，因此出现你遇到的问题。

解决方案 #

方案1：增加可回退状态校验（适配header配置在Drawer层的场景） #

调用goBack前先判断当前导航层是否有可回退的页面，若没有则调用父导航器的回退方法，同时可以消除相关警告：

<Drawer.Navigator>
    <Drawer.Screen 
        ....
        options={{
          header: ({ navigation, route, options }) => {
              const title = getHeaderTitle(options, route.name);
              return (
                <MyHeader 
                  title={title}
                  iconName={"menu"} 
                  goback={() => {
                    if (navigation.canGoBack()) {
                      navigation.goBack();
                    } else {
                      // 无回退内容时调用父导航器执行回退
                      navigation.getParent()?.goBack();
                    }
                  }}
                />
              );
          },
        }}
      />
</Drawer.Navigator>

方案2：将自定义Header移到子栈配置（更符合v6设计规范的推荐方案） #

绝大多数项目中Drawer的每个页面都是独立的嵌套子栈（NativeStack/Stack导航），直接将Header配置在子栈层级，拿到的navigation就是当前子栈的实例，goBack自然就是返回子栈的上一页：

// 每个Drawer页面对应的独立子栈
const HomeStack = createNativeStackNavigator();
function HomeStackScreen() {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen 
        name="HomeIndex" 
        component={HomeIndex}
        options={{
          header: ({ navigation, route, options }) => {
            const title = getHeaderTitle(options, route.name);
            return (
              <MyHeader 
                title={title}
                iconName={"menu"} 
                goback={() => navigation.goBack()}
                // 如需打开抽屉可以调用 navigation.openDrawer()
              />
            );
          }
        }}
      />
      {/* 子栈其他页面 */}
      <HomeStack.Screen name="Detail" component={DetailPage} />
    </HomeStack.Navigator>
  )
}

// Drawer层配置，关闭Drawer自带的Header避免重复
<Drawer.Navigator>
  <Drawer.Screen 
    name="Home" 
    component={HomeStackScreen}
    options={{headerShown: false}}
  />
  {/* 其他Drawer页面 */}
</Drawer.Navigator>

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