如何在React Native中设置带有路由名称的浏览器选项卡标题

Question

当前在我的应用程序中，浏览器选项卡标题只是屏幕的名称。但是，我想将选项卡标题设置为{APP_NAME} - {PAGE_NAME}。我使用的是<Stack.Navigator/>，我知道您使用screenOptions来提供自定义标题，但我无法访问route名称。

<Stack.Navigator
initialRouteName={Pages.HOME}
screenOptions={{
title: `MyAppName - ${route.name}`,
header: ({ navigation, back, route }) => (
<Navbar
navigation={navigation}
back={back}
title={route.name}
navigationOptions={[
Pages.HOME,
Pages.MY_MESSAGES,
Pages.PROFILE_AND_ACCOUNT,
Pages.MY_ACCOUNT,
Pages.FAQ,
]}
actions={[logoutAction]}
/>
),
}}
>

正如您所看到的，header参数包含route，但我不知道如何将其放入标题中。

任何帮助都将不胜感激，谢谢。

Answer 1

您不需要对每个屏幕都这样做。您可以在NavigationContainer中自定义文档标题

<NavigationContainer
documentTitle={{
formatter: (options, route) =>
`MyAppName - ${options?.title ?? route?.name}`
}}
>
{/* content */}
</NavigationContainer>

https://reactnavigation.org/docs/navigation-container/#documenttitle

不过，如果您需要文档中提到的选项中的路线名称：

<Stack.Navigator
screenOptions={({ route }) => ({
title: route.name,
})}
>

https://reactnavigation.org/docs/screen-options/#screenoptions-导航上的道具