currently in my app, the browser tab title is just the name of the screen. However I want to set the tab title to {APP_NAME} - {PAGE_NAME}
. I am using a <Stack.Navigator/>
and I know that you use the screenOptions
to give a custom title, but I cannot access the route
name.
<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]}
/>
),
}}
>
As you can see, the header
param contains route
, but I cannot/don't know how to get this into the title.
Any help would be appreciated, thanks.
You don't need to do this for every screen. You can customize the document title in NavigationContainer
<NavigationContainer
documentTitle={{
formatter: (options, route) =>
`MyAppName - ${options?.title ?? route?.name}`
}}
>
{/* content */}
</NavigationContainer>
https://reactnavigation.org/docs/navigation-container/#documenttitle
Though also if you need the route name in options as mentioned in docs:
<Stack.Navigator
screenOptions={({ route }) => ({
title: route.name,
})}
>
https://reactnavigation.org/docs/screen-options/#screenoptions-prop-on-the-navigator
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.