如何使用React Navigation动态更改标签页标题？

我正在使用React Navigation库在React Native中构建一个应用程序。我面临的问题是，在堆栈导航器（HomeStack）内呈现选项卡导航器时，每个单独的选项卡都保留父堆栈导航器“ Home”的标题。

在阅读了有关嵌套导航器（https://reactnavigation.org/docs/nesting-navigators/）的文档之后，我尝试将Tab Navigator中的每个Tab设置为它自己的堆栈，删除父堆栈上的标头（使用options={{headerShown: false}}），并设置单个标头每个选项卡堆栈上的标题（使用options={{ headerShown: true），但这只是将标题从每个选项卡中完全删除。

当前流程是，用户打开应用程序，定向到登录堆栈，然后单击“登录”按钮后，应用程序将呈现HomeStack，其中显示了各种Tab选项。但是，即使每个选项卡都是其自己的唯一堆栈，每个选项卡都具有相同的标题“主目录”。

这是导航器的当前布局（带有围绕所有内容的身份验证上下文：]

//Home Screen (nested Tab Navigator)
function HomeScreen() {
  return (
    <Tab.Navigator >
      <Stack.Screen name="Profile" component={Profile}/>
      <Stack.Screen name="Goals" component={Goals}/>
      <Stack.Screen name="Board" component={Board}/>
      <Stack.Screen name="People" component={People}/>
    </Tab.Navigator>
  );

//Child Stacks (within Tab Navigator -- all follow same format)
function Profile() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Profile Screen</Text>
    </View>
  )
}

//Parent Navigation Container
return (
    <AuthContext.Provider value={authContext}>
      <NavigationContainer>
        <Stack.Navigator>
          {state.userToken == null ? (
            <Stack.Screen name="SignIn" component={SignInScreen} />
          ) : (
              <Stack.Screen name="Home" component={HomeScreen}/>
            )}
        </Stack.Navigator>
      </NavigationContainer >
    </AuthContext.Provider >
  );

此问题先前已问过，该解决方案过去是在初始堆栈声明期间添加更新的参数（在此处讨论：https://github.com/react-navigation/react-navigation/issues/741），但是自最新更新（版本5）以来，Navigators功能的方式已更改。现在，将参数添加到初始堆栈声明中会返回错误：

此操作的最终目标是使每个Tab都充当其自己的Stack，并在屏幕的左上/右上角显示带有唯一标题/操作按钮的标题。我仍然不清楚如何通过新的更改来完成此操作，因此我们将不胜感激！

function getHeaderTitle(route) {
  const routeName = route.state
    ? route.state.routes[route.state.index].name
    : route.params?.screen || 'Profile';

  switch (routeName) {
    case 'Profile':
      return 'My profile';
    case 'Goals':
      return 'Goals';
    case 'Board':
      return 'Board';
    case 'People':
      return 'People';
  }
}

// ...

<Stack.Screen
  name="Home"
  component={HomeTabs}
  options={({ route }) => ({
    headerTitle: getHeaderTitle(route),
  })}
/>

StackOverflow

收藏 分享 链接