React Native中stack navigator嵌套drawer时隐藏drawer页面头部失败怎么办

你当前自定义的头部配置在父Stack导航的Shop路由下，整个Drawer导航都是这个Shop路由的子组件，所以Drawer内的所有页面都会默认显示这个父级头部。你之前在Drawer内部设置headerShown: false只会控制Drawer导航自身的头部，无法影响父Stack的头部，因此配置不生效。

方案1（推荐）：直接隐藏父Stack对应Drawer路由的头部 #

你只需要给父Stack中对应Drawer的Shop路由添加headerShown: false配置，即可让所有Drawer内的页面隐藏父Stack的头部，其他Stack页面（登录、注册、商品详情）的头部不受影响：

// 修改你的StackNavigator代码中Shop路由的配置
<Stack.Screen
  name="Shop"
  component={DrawerNavigator}
  options={{
    // 新增这行即可隐藏父Stack给Drawer路由配置的头部
    headerShown: false
  }}
/>

如果你需要在Drawer的部分页面显示头部，直接将自定义头部的配置挪到Drawer导航对应子页面的options中即可，示例如下：

// 你的Drawer导航配置示例
const DrawerNavigator = () => (
  <Drawer.Navigator initialRouteName="ShopIndex">
    <Drawer.Screen
      name="ShopIndex"
      component={ShopIndex}
      options={{
        // 把之前写在Stack里的自定义Header挪到这里
        header: ({ navigation }) => (
          <Header
            statusBarProps={{ translucent: false }}
            placement="center"
            leftComponent={{
              icon: "menu",
              color: "#fff",
              onPress: () => navigation.dispatch(DrawerActions.toggleDrawer()),
            }}
            centerComponent={{
              text: "Shopping",
              style: {
                fontSize: 24,
                color: "#fff",
              },
            }}
            containerStyle={{
              backgroundColor: "#F84930",
            }}
          />
        )
      }}
    />
    {/* 其他Drawer子页面不需要头部的话无需额外配置，或显式设置headerShown: false即可 */}
    <Drawer.Screen
      name="OtherDrawerPage"
      component={OtherPage}
      options={{ headerShown: false }}
    />
  </Drawer.Navigator>
)

方案2：动态控制父Stack头部显隐 #

如果你不想修改Drawer内部的配置，也可以在父Stack的Shop路由配置中通过监听当前路由状态动态控制头部显隐，不过这种方式复杂度更高，不如方案1易维护。

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