Expo Router 中堆栈标题后退按钮的标题不正确

Question

我正在使用 Expo Router 开发 React Native 项目，并且遇到了“后退”按钮上显示标题的问题。

导航结构：

我的导航结构如下：

在/应用程序中

_layout.tsx <Stack />
  (tabs)
    _layout <Tabs />
    home
      _layout <Stack />
      index <- when I router.navigate('/list/[id]') from here
list
  [id] <- to here I have an incorrect header back title
  

问题：

当我从主页 Tabs.Screen 导航到列表项屏幕时，我希望看到标题

home

，但相反，它显示

(tabs)

。

代码

/app/_layout.tsx

export const unstable_settings = {
    initialRouteName: '(tabs)',
};

export default function RootLayout() {
    return (
        <Stack>
            <Stack.Screen name="(tabs)" />
        </Stack>
    );
}

/app/(tabs)/_layout.tsx

export default function TabsLayout() {
    return (
        <Tabs>
            <Tabs.Screen name="home" />
            <Tabs.Screen name="about" />
        </Tabs>
    );
}

/app/_layout/home/index.tsx

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

    // Navigation to Item
    const navigateToItem = () => {
        navigation.navigate('/item/1');
    };

    return (
        <View>
            <Button title="Go to Item 1" onPress={navigateToMeal} />
        </View>
    );
}

我尝试过的

我尝试为我拥有的每个屏幕指定一个标题

• 尝试在 /app/index.tsx 中重定向而无需使用 stable_settings 进行导航

如何确保后退按钮上的标题正确反映导航中上一屏幕的名称？ Expo Router 中是否有任何影响标头管理的特定行为？

将不胜感激任何帮助！谢谢！

我的临时解决方案

我在每个选项卡中编写了一个钩子来检测当前选项卡名称，接下来，我将要在后退按钮中使用的标题设置为 redux 存储并在选项卡布局中使用此标题调用 setOptions 。

Answer 1

为您的

(tabs)

堆栈项目指定一个标题：

export const unstable_settings = {
    initialRouteName: '(tabs)',
};

export default function RootLayout() {
    return (
        <Stack>
            <Stack.Screen
                name="(tabs)"
                options={{
                    title: 'Home',
                }}
            />
        </Stack>
    );
}

这并没有解决后退按钮不显示前一个选项卡子屏幕的名称的事实，因为在这种情况下发生的导航是在堆栈之间。