javascript - 如何使用 React Navigation 动态更改选项卡标题？

Question

我正在使用 React Navigation 库在 React Native 中构建一个应用程序。我面临的问题是，在 Stack Navigator (HomeStack) 内呈现 Tab Navigator 时，每个单独的选项卡都保留父 Stack Navigator 的标题“Home”。

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

当前的流程是，用户打开应用程序，被定向到登录堆栈，然后一旦他们点击“登录”按钮，应用程序就会呈现 HomeStack，其中显示各种选项卡选项。然而，每个选项卡都有相同的标题“主页”，即使每个选项卡都是其自己独特的堆栈。

这是我的导航器的当前布局(所有内容都包含身份验证上下文):

//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 >
  );

这个问题之前已经被问过，解决方案过去是在初始 Stack 声明期间添加更新的参数(此处讨论:https://github.com/react-navigation/react-navigation/issues/741)，但自最新更新(版本 5)以来，Navigators 函数的方式发生了变化。现在，向初始 Stack 声明添加参数会返回错误:

这样做的最终目标是让每个选项卡都充当它自己的堆栈，并在屏幕的左上角/右上角显示带有唯一标题/操作按钮的标题。我仍然不清楚如何通过新的更改来完成此操作，因此我们将不胜感激!

Answer 1

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),
  })}
/>

https://reactnavigation.org/docs/screen-options-resolution#setting-parent-screen-options-based-on-child-navigators-state