首页 > 解决方案 > React Navigation Drawer 默认标题:更改标题标题与包装在抽屉导航器中的所有子堆栈屏幕名称相对应

问题描述

我很困惑为什么标题标题没有随着包裹在抽屉导航器中的子堆栈而更新。

<Drawer.Navigator
  screenOptions={{headerShown: true}}
  drawerContent={props => <CustomSidebarMenu {...props} />}>
  <Drawer.Screen name="Dashboard" children={AppNavigator} />

  <Drawer.Screen name="Contact" children={ContactStackNavigator} />
</Drawer.Navigator>

下面是我的 AppNavigator 加载了 2 个堆栈(HomeNavigator 和 TaskNavigator - 有各自的屏幕)

export function AppNavigator() {
  const { colors } = useTheme();

  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ color }) => (
          <TabBarIcon color={color} routeName={route.name} />
        ),
      })}
      tabBarOptions={{
        showLabel: false,
        activeTintColor: colors.activeTab,
        inactiveTintColor: colors.inactiveTab,
      }}
    >
      <Tab.Screen name={NavigationType.home} children={HomeNavigator} />
      <Tab.Screen name={NavigationType.task} children={TaskNavigator} />
    </Tab.Navigator>
  );
}

在子堆栈中禁用所有标题,仅将抽屉导航器标题设置为显示。当我导航到屏幕时,我只能看到仪表板和联系人标题。但是当我导航到以下所有屏幕时,我需要更新标题:主页、homeDetail 和任务、taskDetail、createTask、updateTask 等......它们位于各自的堆栈中。任何人都可以帮助我实现这一目标。谢谢

标签: react-nativereact-navigationreact-navigation-v5react-navigation-stackreact-navigation-drawer

解决方案


推荐阅读