React Native中仅显示Stack导航头时如何隐藏Drawer导航头

动态控制Drawer头部（推荐，适配分页面控制需求） #

你的导航层级为Drawer父导航嵌套Stack子导航，只需在Drawer层监听子Stack的当前路由，动态切换Drawer头部的显示状态即可，操作如下：

1. 在DrawerStack.js顶部导入路由查询工具：

import { getFocusedRouteNameFromRoute } from '@react-navigation/native';

2. 修改Drawer中Home路由的配置，将options改为动态回调形式：
   将原有<Drawer.Screen name="Home" component={MainStack}/>替换为以下代码：

<Drawer.Screen 
  name="Home" 
  component={MainStack}
  options={({ route }) => {
    // 获取子Stack当前聚焦的路由名称，兜底为Home避免首次加载异常
    const focusedRoute = getFocusedRouteNameFromRoute(route) ?? 'Home';
    return {
      // 进入Notes页时隐藏Drawer头部，其余页面保持显示
      headerShown: focusedRoute !== 'Notes'
    };
  }}
/>

配置后效果完全符合你的需求：

• Home页：Stack头部已设为隐藏，Drawer头部正常显示，仅单头部
• Notes页：Drawer头部自动隐藏，Stack头部默认显示，仅单头部

全局转交头部控制权（适合多数页面用Stack头部的场景） #

如果你后续大部分页面都优先用Stack的头部，可直接关闭Drawer的全局头部，所有头部完全交由子Stack控制：
修改DrawerStack.js中的Drawer.Navigator配置：

<Drawer.Navigator 
  screenOptions={{ headerShown: false }}
>
  <Drawer.Screen name="Home" component={MainStack}/>
  <Drawer.Screen name="About" component={AboutStack} />
</Drawer.Navigator>

该方案下你只需要在各个Stack.Screen中按需设置headerShown的开关即可，灵活性更高。

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