如何使用 React Navigation 动态更改选项卡 headers？

Question

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

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

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

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

//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)。现在，将参数添加到初始 Stack 声明 returns 会出错：

这样做的最终目标是让每个选项卡作为它自己的堆栈，并在屏幕的顶部 left/right 角落显示一个 header 和一个独特的 title/action 按钮.我仍然不清楚如何通过新的更改来完成此操作，因此将不胜感激任何指导！

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

如何使用 React Navigation 动态更改选项卡 headers？

How can I change tab headers dynamically using React Navigation?

javascript

react-native

react-navigation

react-navigation-stack

react-navigation-bottom-tab