React Native中隐藏Drawer导航头部问题（react-navigation ^1.5.12）

我帮你排查了下问题，核心原因在于你的导航嵌套结构——你设置的header: null没作用在外层StackNavigator上，那个灰色头部其实是外层MainStack给LoggedInHome页面添加的，而非DrawerNavigator或内部页面的头部。

问题分析 #

你的HomeStack（DrawerNavigator）是作为LoggedInHome屏幕嵌套在MainStack（StackNavigator）里面的。你之前在DrawerMenu和各个页面设置header: null，只能控制DrawerNavigator内部的头部显示，但外层StackNavigator依然会给LoggedInHome这个嵌套页面加上默认头部。

解决方案 #

直接给外层MainStack中的LoggedInHome页面配置navigationOptions: { header: null }，就能移除这个灰色头部了。同时注意你原代码里MainStack的initialRouteName写错了，应该对应LoggedInHome而不是Home。

修改后的Router.js代码如下：

const HomeStack = DrawerNavigator(
  {
    Home: { screen: Home },
    Message: { screen: Message },
    History: { screen: History },
    Settings: { screen: Settings },
  },
  {
    contentComponent: DrawerMenu,
    drawerWidth: 240,
    initialRouteName: 'Home',
  }
);

export default const MainStack = StackNavigator(
  {
    LoggedInHome: { 
      screen: HomeStack,
      navigationOptions: { header: null } // 关键：隐藏外层Stack的头部
    },
    Notification: { screen: Notification },
  },
  {
    initialRouteName: 'LoggedInHome', // 修正路由名称
  }
);

补充说明 #

• 这样设置后，Notification页面的头部会正常保留（如果需要的话），只有Drawer所在的LoggedInHome页面会隐藏头部。
• 你之前在DrawerMenu和内部页面设置的header: null可以保留，确保DrawerNavigator内部不会额外显示头部。

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