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>
  );
}