+-
如何使用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功能的方式已更改。现在,将参数添加到初始堆栈声明中会返回错误:enter image description here

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

0
投票
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