DrawerNavigator 标头覆盖 React Native 中的 StackNavigator 标头

Question

我有一个抽屉导航器，它的每个元素都是一个屏幕的堆栈导航器。

    const RootDrawerNavigator = createDrawerNavigator({
        Home:{
            name: 'Home',
            screen: HomeStack,
            navigationOptions:{
                headerMode: 'screen'
            }
        },
        ShareFilesStack:{
            name:'Offline File Sharing',
            screen: ShareFileStack,
            navigationOptions: {
                title: 'Offline File Sharing',
                headerMode: 'screen'
            },
        },
        UserProfileStack:{
            name: 'Your Profile',
            screen: UserProfileStack,
            navigationOptions: {
                title: 'Your Profile',
                headerMode: 'screen'
            },
        },
    })

问题在于，在应用程序中，标题显示为 RootDrawerNavigator，而不是在各个堆栈导航器中为不同屏幕配置的标题。

我尝试将 headerMode 设置为屏幕，但没有，但对我没有任何作用。

Answer 1

带有堆栈屏幕和抽屉菜单的简单路由示例

function MainStackNavigator() {
  return (
    <Stack.Navigator headerMode="none" initialRouteName="Home">
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Profile" component={ProfileScreen} />
      <Stack.Screen name="Settings" component={SettingsScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  );
}

export default function AppRouter() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={MainStackNavigator} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}