如何使用 react-navigation 通过 React Native Web 设置文档标题？

Question

我的 Web 应用程序是由 React Native Web 使用 react-navigator 创建的。

react-navigator 默认设置 RouteName 为 document.title。

例如

<Stack.Navigator screenOptions={{ headerShown: false }}>
    <Stack.Screen name="root" component={RootScreen} />
    <Stack.Screen name="search" component={SearchScreen} />
</Stack.Navigator>

生成

...
<head>
  <title>root</title>
  ...

我想要的

按需更改 document.title。

我试过但没有用的方法

尝试直接访问文档 object，但下面的代码不起作用。

export default function RootScreen({ navigation }) {
  useEffect(() => {
    document.title = `My Web App | ${someMessage}`
  })

Answer 1

我发现 Expo for Web 基本上将屏幕标题设置为文档标题。所以我做了这样的事情：

import { Platform } from 'react-native';
const title = (text) => Platform.select({ web: `My Web App | ${text}`, default: text });

<Stack.Navigator screenOptions={{ headerShown: false }}>
    <Stack.Screen name="root" component={RootScreen} options={{ title: title('root') }} />
    <Stack.Screen name="search" component={SearchScreen} options={{ title: title('search') }} />
</Stack.Navigator>

然后您可以将 title 函数修改为 return 各种屏幕的预期标题。

Answer 2

这让我花了我早上最好的时间来弄清楚。有一种方法可以在一个地方设置标题，而不是在每个屏幕上设置。

 <NavigationContainer
    documentTitle={{
      formatter: (options, route) => 
        `${options?.title ?? route?.name} - My Cool App`,
    }}
 >

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

当您在导航容器上进行此更改时，这也适用于嵌套导航。

Answer 3

您可以在 React 组件中调用 navigation.setOptions({ title: 'some title' })

https://reactnavigation.org/docs/headers/#updating-options-with-setoptions

如何使用 react-navigation 通过 React Native Web 设置文档标题？

How to set document title by React Native Web with react-navigation?

react-native

react-navigation

react-native-web

我想要的

我试过但没有用的方法