如何隐藏DrawerNavigator嵌套StackNavigator中DetailScreen的头部？

你的问题核心是混淆了DrawerNavigator和StackNavigator的导航头部：你当前看到的头部是DrawerNavigator为HomeNavigation这个选项生成的，而不是嵌套的StackNavigator的头部。因为你在Stack.Navigator的全局screenOptions里设置了headerShown: false，Stack的头部已经被完全隐藏，所以你针对DetailScreen设置的headerShown: false根本不会生效。

按照以下步骤修改代码即可实现需求：

1. 隐藏DrawerNavigator的头部 #

修改MenuLateral中的Drawer.Screen配置，给HomeNavigation选项加上headerShown: false，关闭Drawer生成的头部：

export const MenuLateral = () => {
  return (
    <Drawer.Navigator drawerContent={props => <MenuInterno {...props} />}>
      <Drawer.Screen
        name="HomeNavigation"
        component={HomeNavigation}
        options={{title: 'Home', headerShown: false}} // 添加这一行
      />
      <Drawer.Screen
        name="UserProfileScreen"
        component={UserProfileScreen}
        options={{title: 'My profile'}}
      />
    </Drawer.Navigator>
  );
};

2. 调整StackNavigator的头部显示规则 #

去掉Stack.Navigator全局的headerShown: false，让默认情况下Stack的头部显示，再单独给DetailScreen设置隐藏：

export const HomeNavigation = () => {
  return (
    <Stack.Navigator screenOptions={{title: 'Home'}}> // 移除全局的headerShown: false
      <Stack.Screen name="HomeScreen" component={HomeScreen} />
      <Stack.Screen
        name="DetailScreen"
        component={DetailScreen}
        options={{headerShown: false}} // 仅在此页面隐藏头部
      />
    </Stack.Navigator>
  );
};

这样修改后，HomeScreen会显示StackNavigator的头部，DetailScreen的头部会被隐藏，同时不会显示DrawerNavigator的头部，完全符合你的需求。

内容的提问来源于stack exchange，提问作者SirRiT003