Expo Router栈头部返回按钮标题显示错误的问题求助

问题核心 #

从Tabs内的home页面跳转至list/[id]页面后，返回按钮标题显示为(tabs)而非预期的home——本质是Expo Router的导航栈层级中，list/[id]的上一级是Root Stack中的(tabs)路由组，而非home单个页面。

有效解决方案 #

方案1：显式设置目标页面的返回按钮标题 #

在list/[id]页面组件中，通过useNavigation钩子手动指定返回按钮标题：

import { useNavigation, useEffect } from '@react-navigation/native';

export default function ListItemScreen() {
  const navigation = useNavigation();

  useEffect(() => {
    navigation.setOptions({
      headerBackTitle: 'home'
    });
  }, [navigation]);

  return <View>{/* 页面内容 */}</View>;
}

如果需要适配不同来源页面，可在跳转时传递标题参数：

// home页面跳转时传参
navigation.navigate('/list/1', { backTitle: 'home' });

// list/[id]页面接收并设置
export default function ListItemScreen({ route }) {
  const navigation = useNavigation();
  const backTitle = route.params?.backTitle || '返回';

  useEffect(() => {
    navigation.setOptions({ headerBackTitle: backTitle });
  }, [navigation, backTitle]);
}

方案2：调整路由嵌套结构（推荐） #

将list目录嵌套到home的Stack下，让跳转处于同一个导航栈层级：

/app
  _layout.tsx <Stack />
  (tabs)
    _layout <Tabs />
    home
      _layout <Stack />
      index
      list
        [id] <- 现在属于home的子栈

跳转时使用相对路径：

// home页面跳转
navigation.navigate('./list/1');

此时返回按钮会自动显示home，因为list/[id]的上一级就是home页面。

方案3：动态更新路由组的标题 #

在(tabs)的_layout.tsx中，监听当前激活的Tab，动态更新Root Stack中(tabs)路由的标题：

import { useTabsState, useNavigation, useEffect } from '@react-navigation/native';

export default function TabsLayout() {
  const tabsState = useTabsState();
  const navigation = useNavigation();
  const activeTab = tabsState.routes[tabsState.index].name;

  useEffect(() => {
    // 更新父Stack的标题为当前激活的Tab名称
    navigation.setOptions({ title: activeTab });
  }, [navigation, activeTab]);

  return (
    <Tabs>
      <Tabs.Screen name="home" options={{ title: 'home' }} />
      <Tabs.Screen name="about" options={{ title: 'about' }} />
    </Tabs>
  );
}

这样从home跳转至list/[id]时，返回按钮会显示父Stack的标题home。

Expo Router 头部管理的特殊行为 #

1. 路由容器层级优先：导航栈的层级由_layout.tsx定义的容器（Stack/Tabs）决定，跨容器跳转时，返回栈的上一级是容器路由而非容器内的单个页面。
2. 默认标题取路由名称：返回按钮标题默认使用导航栈中上一个路由的名称（即目录/路由组的名称，如(tabs)），而非容器内活跃页面的标题。
3. 可通过options覆盖：任何页面都可以通过navigation.setOptions或Screen组件的options属性，自定义头部标题、返回按钮文本等。
4. 路由嵌套影响栈结构：将页面嵌套到对应容器的子栈中，能让跳转处于同一层级，自动继承正确的返回标题。

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