使用Expo与<Tabs>时导航栏标题始终显示路由名的问题求助

环境 #

• Expo 5.4.9
• Expo Router 2.0.0
• React Navigation 6.0.2
• React Native 0.72.3

项目结构 #

• auth/_layout.tsx（Tab布局）
• auth/current.tsx
• auth/...（其他标签页组件）
• _layout.tsx（Stack布局）
• index.tsx（重定向至登录页）
• login.tsx（重定向至auth/current）

已尝试的设置方案 #

文件auth/_layout.tsx #

1. 在<Tabs.Screen>中设置options.title与options.headerTitle：

<Tabs>
   <Tabs.Screen
      name="current"
      options={{
         title: 'In Progress',
         headerTitle: 'In Progress',
         tabBarLabel: 'In Progress',          
      }}
   />
   ...
</Tabs>

2. 在<Tabs>组件中设置navigationOptions.title：

<Tabs
   navigationOptions={{
     title:'In Progress'
   }}
>
   <Tabs.Screen name="current" .../>
    ...
</Tabs>

3. 在<Tabs>组件中设置screenOptions.title与screenOptions.headerTitle：

<Tabs
   screenOptions={{
     title:'In Progress',
     headerTitle: 'In Progress'
   }}
>
   <Tabs.Screen name="current" .../>
    ...
</Tabs>

文件auth/current.tsx #

4. 在页面组件内使用navigation.setOptions：

function CurrentScreen() {
  const navigation = useNavigation();

  useLayoutEffect(() => {
    navigation.setOptions({
      title: 'In Progress',
    });
  }, [navigation]);

    return (
        <View style={styles.container}>
            <Text style={styles.title}>In Progress</Text>
        </View>
    );
}

5. 设置Screen.navigationOptions.title：

function CurrentScreen() {
   ...
}

CurrentScreen.navigationOptions = {
  title: 'My Title'
};

export default CurrentScreen;

每个标签页对应一个独立的Screen组件文件，但无论用哪种方式设置，导航栏始终显示路由名，只能修改标签页的header文本，无法更改顶部导航栏的标题，问题出在哪里？

问题原因与解决方法 #

核心问题是控制顶部导航栏标题的是根目录下的Stack布局（_layout.tsx），你之前的所有设置都只针对Tab层级，没有修改Stack层的配置。

具体解决步骤 #

1. 直接在根_layout.tsx的Stack路由配置中设置标题
   因为你的Tab导航是嵌套在Stack路由里的，顶部导航栏由Stack提供，所以要在Stack的Screen选项中配置标题：

import { Stack } from 'expo-router';

export default function RootLayout() {
  return (
    <Stack>
      <Stack.Screen name="index" options={{ headerShown: false }} />
      <Stack.Screen name="login" options={{ headerShown: false }} />
      // 配置auth路由的顶部导航栏标题
      <Stack.Screen 
        name="auth" 
        options={{ title: 'In Progress' }} 
      />
    </Stack>
  );
}

2. 实现标题随当前Tab动态切换
   如果需要顶部标题跟着Tab切换变化，可以通过路由状态获取当前活跃的Tab，动态返回对应标题：

import { Stack } from 'expo-router';
import { useRoute } from '@react-navigation/native';

// 抽离动态标题组件
const DynamicHeaderTitle = () => {
  const route = useRoute();
  const activeTabName = route.state?.routes[route.state.index]?.name;
  
  const titleMap = {
    current: 'In Progress',
    completed: '已完成',
    // 其他Tab对应的标题
  };

  return <Text>{titleMap[activeTabName] || '默认标题'}</Text>;
};

export default function RootLayout() {
  return (
    <Stack>
      <Stack.Screen name="index" options={{ headerShown: false }} />
      <Stack.Screen name="login" options={{ headerShown: false }} />
      <Stack.Screen 
        name="auth" 
        options={{ headerTitle: () => <DynamicHeaderTitle /> }} 
      />
    </Stack>
  );
}

为什么之前的设置无效？ #

• Tab层级的title/headerTitle仅控制Tab栏的标签或Tab内部的子导航，无法影响外层Stack提供的顶部导航栏
• React Navigation 6已废弃navigationOptions，改用screenOptions/options，所以你尝试的navigationOptions本身不会生效

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