React Navigation中如何实现抽屉导航覆盖页面头部？

我正在使用React Navigation开发应用，想要实现抽屉导航打开时覆盖页面头部的效果，但目前打开抽屉时头部不会被抽屉遮挡。

当前的实现代码如下：

import React from 'react'; 
import { View, Text, StyleSheet } from 'react-native'; 
import { createStackNavigator, createDrawerNavigator } from 'react-navigation'; 
import CategoryScreen from './CategoryScreen'; 
import ProductsScreen from './ProductsScreen'; 
import CartScreen from './CartScreen'; 

const drawerScreens = createDrawerNavigator (
  { 
    Category: CategoryScreen, 
    Products: ProductsScreen, 
  },
  { initialRouteName: 'Category' } 
) 

export default AppStack = createStackNavigator( 
  { 
    drawer: { 
      screen: drawerScreens, 
      navigationOptions: ({ navigation }) => ({ 
        header: <View style={styles.container}><Text>Header</Text></View> 
      }), 
    }, 
    cart: {screen: CartScreen} 
  }, 
  { initialRouteName: 'drawer', } 
); 

const styles = StyleSheet.create({ 
  container: { 
    height: 100, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: 'orange', 
  } 
})

当前效果：打开抽屉时，橙色的头部依然显示在抽屉上方，抽屉只覆盖了头部下方的页面内容。

问题根源 #

你现在的结构是把StackNavigator作为最外层，并且把头部设置在Stack的drawer路由上——这就导致头部的层级比内部的DrawerNavigator更高，所以抽屉拉出来的时候自然没法覆盖它。

解决办法 #

我们需要把头部的控制权交给DrawerNavigator，让头部成为抽屉导航内部的一部分，这样抽屉的层级就能超过头部，实现覆盖效果。这里有两种简单的实现方式：

方式1：给抽屉内每个屏幕单独设置头部 #

修改drawerScreens的配置，为每个页面的navigationOptions添加头部：

const drawerScreens = createDrawerNavigator(
  {
    Category: {
      screen: CategoryScreen,
      navigationOptions: {
        header: <View style={styles.container}><Text>Header</Text></View>
      }
    },
    Products: {
      screen: ProductsScreen,
      navigationOptions: {
        header: <View style={styles.container}><Text>Header</Text></View>
      }
    },
  },
  { initialRouteName: 'Category' }
)

// 外层StackNavigator不再设置header，把控制权交给抽屉
export default AppStack = createStackNavigator(
  {
    drawer: { screen: drawerScreens },
    cart: { screen: CartScreen }
  },
  { initialRouteName: 'drawer' }
);

方式2：统一设置抽屉的默认头部 #

如果抽屉里的所有页面都用同一个头部，直接在DrawerNavigator的配置里用defaultNavigationOptions统一设置，不用重复写代码：

const drawerScreens = createDrawerNavigator(
  {
    Category: CategoryScreen,
    Products: ProductsScreen,
  },
  {
    initialRouteName: 'Category',
    defaultNavigationOptions: {
      header: <View style={styles.container}><Text>Header</Text></View>
    }
  }
)

// 外层Stack移除header配置
export default AppStack = createStackNavigator(
  {
    drawer: { screen: drawerScreens },
    cart: { screen: CartScreen }
  },
  { initialRouteName: 'drawer' }
);

补充说明 #

不用担心CartScreen的头部受影响——它是外层Stack的独立路由，你依然可以在它的navigationOptions里设置专属的头部，完全不会和抽屉里的头部冲突。

这样调整后，抽屉的层级就会高于头部，打开时就能完全覆盖头部区域了。

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