React Navigation跨栈跳转返回按钮显示栈名而非上一屏标题如何解决

问题根源 #

你当前的导航结构中root、auth、user三个栈是最外层MainStack的同级子路由。当你从auth栈内的LoginScreen跳转到user栈时，本质是在最外层MainStack层级执行了push操作，将user栈路由加入路由栈，此时最外层路由栈的上一个节点是名称为auth/root的栈路由，React Navigation默认会取上一级路由的name作为返回按钮文本，因此会显示auth/root而非上一个页面的标题。

另外你贴出的代码存在笔误：user对应的Screen结束标签写成了</RootStack.Screen>，注意修改为</MainStack.Screen>避免运行报错。

解决方案 #

该需求完全可以实现，不需要隐藏返回按钮文字，可根据项目复杂度选择以下任意方案：

方案1：跳转携带前序页面标题参数（改动最小，适合通用页面较少的场景） #

1. 跳转时将前一个页面的标题作为参数传入：

// LoginScreen 跳转逻辑示例
navigation.navigate('user', {
  screen: 'ValidateUserAccount',
  params: {
    prevScreenTitle: 'login'
  }
})

2. 在UserStack的配置中动态读取参数设置返回标题：

<UserStack.Navigator
  screenOptions={({ route }) => ({
    headerBackTitle: route.params?.prevScreenTitle || '返回'
  })}
>
  {/* UserStack 原有页面配置 */}
</UserStack.Navigator>

如果你的头部是在单个页面单独配置，直接在对应页面的options中读取参数即可。

方案2：调整导航结构（适合通用页面都是独立单页的场景） #

去掉UserStack的嵌套，将通用页面直接注册为最外层MainStack的子路由：

<MainStack.Navigator
  screenOptions={{
    headerShown: false
  }}
>
  {accessToken ? (
    <MainStack.Screen
      name="root"
      component={BottomTabNavigator}
    />
  ) : (
    <MainStack.Screen
      name="auth"
      component={AuthenticationStack}
    />
  )}
  {/* 直接注册通用页面，无需包裹在UserStack中 */}
  <MainStack.Screen
    name="ValidateUserAccount"
    component={ValidateUserAccount}
  />
  {/* 其余通用页面同理注册 */}
</MainStack.Navigator>

调整后跳转直接写navigation.navigate('ValidateUserAccount')，返回按钮会自动读取上一个活跃页面的标题，无需额外传参。

方案3：全局动态获取前序路由标题（适合通用页面较多的场景） #

无需每个跳转手动传参，直接在UserStack配置中递归获取上一个活跃页面的标题：

import { useNavigationState } from '@react-navigation/native';

// UserStack screenOptions 配置
screenOptions: () => {
  const routes = useNavigationState(state => state.routes);
  const prevRoute = routes[routes.length - 2];
  let prevTitle = '返回';
  // 递归读取嵌套栈内最后一个活跃页面的名称
  if (['auth', 'root'].includes(prevRoute?.name)) {
    prevTitle = prevRoute.state?.routes[prevRoute.state.index]?.name || prevRoute.name;
  }
  return {
    headerBackTitle: prevTitle
  }
}

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