React Navigation v6 嵌套页面导航时返回行为异常问题

我太懂你这种头疼的感觉了——在抽屉导航套了多个栈导航的结构里，跨栈跳转到嵌套屏幕后，返回按钮的行为完全不符合预期，要么直接跳去了抽屉的默认页，要么跳过了你跳转前的页面，真的很影响使用体验😮‍💨

先帮你理清楚问题出在哪：你现在用的navigation.navigate('AccountStack', { screen: 'OrderDetails', params: { id: 42 } })这种跳转方式，本质是让React Navigation初始化AccountStack这个栈导航器，并且把OrderDetails作为这个栈的初始页面来加载。这就导致AccountStack的栈里只有OrderDetails这一个页面，没有它原本的初始页（比如AccountScreen），所以当你点击返回时，导航器会直接回到抽屉导航的层级，而不是你跳转前的HomeStack页面。

接下来给你两个最常用的解决办法，按需选就行：

方法一：保留目标栈的原有层级，让返回先回到目标栈初始页 #

如果你希望从OrderDetails返回时，先回到AccountStack的初始页（比如AccountScreen），再从抽屉切回HomeStack，那只需要在跳转时加一个initial: false参数，告诉导航器不要把OrderDetails当目标栈的初始页，而是在目标栈的现有层级上叠加：

navigation.navigate('AccountStack', {
  screen: 'OrderDetails',
  params: { id: 42 },
  initial: false, // 关键参数，不能少
});

这样跳转后，AccountStack的栈结构会是AccountScreen → OrderDetails，点击返回会先回到AccountScreen，再操作抽屉回到HomeStack，完全符合常规的嵌套导航逻辑。

方法二：自定义返回行为，直接回到跳转前的页面 #

如果你想让OrderDetails的返回按钮直接回到跳转前的HomeStack页面，不用经过AccountStack的初始页，可以这么做：

1. 跳转时记录当前页面的路由key：

// 在HomeStack的跳转页面里
const fromRouteKey = navigation.getCurrentRoute().key;
navigation.navigate('AccountStack', {
  screen: 'OrderDetails',
  params: { id: 42, fromRouteKey },
});

2. 在OrderDetailsScreen里自定义返回按钮的行为：

function OrderDetailsScreen({ navigation, route }) {
  const handleGoBack = () => {
    // 获取根导航器（抽屉导航）
    const rootNav = navigation.dangerouslyGetParent().dangerouslyGetParent();
    // 跳转到记录的来源路由
    rootNav.navigate({ key: route.params.fromRouteKey });
  };

  return (
    <View>
      {/* 自定义系统返回按钮样式的话，可以用HeaderBackButton */}
      <HeaderBackButton onPress={handleGoBack} />
      {/* 你的页面内容 */}
    </View>
  );
}

如果要修改系统默认的头部返回按钮，也可以在AccountStack的路由配置里设置：

const AccountStack = createStackNavigator({
  Account: AccountScreen,
  OrderDetails: {
    screen: OrderDetailsScreen,
    options: ({ navigation, route }) => ({
      headerLeft: () => (
        <HeaderBackButton onPress={() => {
          const rootNav = navigation.dangerouslyGetParent().dangerouslyGetParent();
          rootNav.navigate({ key: route.params.fromRouteKey });
        }} />
      ),
    }),
  },
});

另外还有个小提醒：如果你的AccountStack在抽屉导航里是被隐藏的，或者不需要用户手动从抽屉进入，也可以考虑把OrderDetails直接放到HomeStack里，但这得看你的业务结构是否允许。

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