如何在 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-prop-on-the-navigator