Stack嵌套Drawer时隐藏导航栏头部，解决重复Header问题

我遇到了React Navigation中重复显示头部的问题，尝试了Stack Overflow上的方案都没能解决。以下是我试过的配置代码（虽无需全部属性，但用来展示无效尝试），截图中的头部来自屏幕组件本身。

尝试过的导航配置代码 #

const Drawer = createDrawerNavigator();

function CustomDrawerContent(props) {
  return (
    <DrawerContentScrollView {...props}>
      <DrawerItemList {...props} />
      <DrawerItem label="Logout" onPress={() => store.dispatch(logOut())} />
    </DrawerContentScrollView>
  );
}

const DrawerNavigator = () => {
  return (
    <Drawer.Navigator
      screenOptions={{
        headerShown: false,
        unmountOnBlur: true,
        headerTitle: false,
        header: () => null,
      }}
      navigationOptions={{
        headerMode: 'none',
        headerVisible: false,
        header: () => null,
      }}
      initialRouteName={Routes.Home}
      drawerContent={props => <CustomDrawerContent {...props} />}>
      <Drawer.Screen name={Routes.Home} component={Home} />
      <Drawer.Screen name={Routes.Locations} component={Locations} />
    </Drawer.Navigator>
  );
};
const Stack = createStackNavigator();
const Authenticated = () => {
  return (
    <Stack.Navigator initialRouteName="Nata">
      <Stack.Screen
        name="Drawer"
        screenOptions={{
          headerShown: false,
          headerTitle: false,
        }}
        navigationOptions={{
          headerMode: 'none',
          headerVisible: false,
          header: () => null,
        }}
        component={DrawerNavigator}
      />
      <Stack.Screen name={Routes.AddLocation} component={AddLocation} />
    </Stack.Navigator>
  );
};

问题截图 #

Home组件代码 #

const Home = ({navigation}) => {
  return (
    <SafeAreaView style={[globalStyle.bgWhite, globalStyle.flex]}>
      <Header
        title={'Home'}
        onLeftIconPress={() => navigation.goBack()}
        onRightIconPress={() => navigation.toggleDrawer()}
      />
      <ScrollView
        style={[globalStyle.flex]}
        contentContainerStyle={[
          globalStyle.containerHorizontalPadding,
          globalStyle.contentVerticalPadding,
        ]}
        showsVerticalScrollIndicator={false}>
        <View>
          <Text>Home</Text>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};
export default Home;

问题分析及解决方法 #

核心原因

1. Home组件内部手动渲染了自定义<Header>，同时导航器配置混乱导致默认头部未被正确隐藏
2. 混用了React Navigation v6+已废弃的navigationOptions和新版screenOptions，配置逻辑冲突失效

修正步骤

1. 清理冗余配置：删除所有navigationOptions代码，统一使用新版的screenOptions或单个屏幕的options属性
2. 统一隐藏导航器头部：在导航器层级仅保留headerShown: false，确保导航器不会自动渲染头部
3. 确认组件内头部需求：如果需要保留Home组件的自定义头部，保持当前组件代码即可；如果希望用导航器自带头部，则删除组件内的<Header>

修改后的导航器代码

const Drawer = createDrawerNavigator();

function CustomDrawerContent(props) {
  return (
    <DrawerContentScrollView {...props}>
      <DrawerItemList {...props} />
      <DrawerItem label="Logout" onPress={() => store.dispatch(logOut())} />
    </DrawerContentScrollView>
  );
}

const DrawerNavigator = () => {
  return (
    <Drawer.Navigator
      screenOptions={{ headerShown: false }}
      initialRouteName={Routes.Home}
      drawerContent={props => <CustomDrawerContent {...props} />}>
      <Drawer.Screen name={Routes.Home} component={Home} />
      <Drawer.Screen name={Routes.Locations} component={Locations} />
    </Drawer.Navigator>
  );
};

const Stack = createStackNavigator();
const Authenticated = () => {
  return (
    <Stack.Navigator initialRouteName="Drawer">
      <Stack.Screen
        name="Drawer"
        component={DrawerNavigator}
        options={{ headerShown: false }}
      />
      <Stack.Screen name={Routes.AddLocation} component={AddLocation} />
    </Stack.Navigator>
  );
};

额外检查

• 确认Locations等其他屏幕是否也手动渲染了<Header>，避免重复显示
• 若AddLocation需要头部，可单独给该屏幕配置options={{ headerShown: true }}或自定义头部

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