React Native合并Drawer与Stack导航时如何隐藏TodoList页的Drawer header

问题原因 #

你的导航层级为HomeStackContainer（全局带header） → AppHomeDrawerNavigator → AddDeleteStackNavigator（子堆栈自带header），进入TodoList页面时两层堆栈的header同时生效，所以出现双头部重叠。

解决方法 #

修改顶层HomeStackContainer的defaultNavigationOptions，动态判断当前活跃路由，如果是TodoList页面就隐藏顶层header，改动代码如下：

const HomeStackContainer = createStackNavigator({
  AppHomeDrawerNavigator
}, {
  defaultNavigationOptions: ({ navigation }) => {
    // 获取抽屉导航当前活跃路由
    const drawerCurrentRoute = navigation.state.routes[navigation.state.index];
    // 判断是否进入了AddTask对应的子堆栈
    if (drawerCurrentRoute.routeName === 'AddTask') {
      // 获取子堆栈当前活跃路由
      const childStackCurrentRoute = drawerCurrentRoute.routes[drawerCurrentRoute.index];
      // 子堆栈当前页面为TodoList时隐藏顶层header
      if (childStackCurrentRoute.routeName === 'TodoList') {
        return {
          header: null
        }
      }
    }
    // 其他页面保留原有header配置
    return {
      headerTitle: "",
      headerLeft: () => (
        <Icon
          style={{ paddingLeft: WIDTH / 40 }}
          onPress={() => navigation.openDrawer()}
          name="menu"
          size={WIDTH / 13.8}
        />
      )
    }
  }
}
);

备选方案（改动略大但更易维护） #

直接移除顶层HomeStackContainer的默认header配置，将需要显示菜单按钮的header下沉到抽屉导航的对应页面单独配置，子堆栈的header不受影响，从根源避免多层header重叠的问题。

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