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

hiroga 发表于 Dev

广贺

我的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。

我试过但没用的

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

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

埃里克卢维

我发现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功能以返回各种屏幕的预期标题。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。