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