如何使用 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 上的标题（使用 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）以来，导航器的功能方式发生了变化。现在，向初始 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