React Native+React Navigation：Drawer Navigator共享头部实现咨询

我之前刚好做过类似的需求，完全懂你那种每个页面套StackNavigator的繁琐感！给你分享两个更简洁优雅的方案，既能实现所有页面共享顶部头部，还能让抽屉展开时位于头部上方，同时避免不必要的重复渲染：

方案一：全局共享头部组件 + DrawerNavigator统一配置 #

首先把通用头部抽成独立组件，然后在DrawerNavigator的全局配置里统一应用，这样所有页面都会复用同一个头部，不用逐个配置：

步骤1：定义共享头部组件 #

先写好带通用逻辑的头部，比如菜单按钮（用来触发抽屉）、标题、右侧操作按钮等，还可以用React.memo来优化渲染性能：

import React, { memo } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';

const SharedHeader = memo(({ navigation, headerTitle = '默认标题' }) => {
  return (
    <View style={styles.headerContainer}>
      {/* 抽屉触发按钮 */}
      <TouchableOpacity 
        onPress={() => navigation.toggleDrawer()}
        style={styles.menuBtn}
      >
        <Text>☰</Text>
      </TouchableOpacity>
      {/* 页面标题 */}
      <Text style={styles.headerTitle}>{headerTitle}</Text>
      {/* 右侧通用操作（比如搜索、设置） */}
      <TouchableOpacity style={styles.rightBtn}>
        <Text>🔍</Text>
      </TouchableOpacity>
    </View>
  );
});

const styles = StyleSheet.create({
  headerContainer: {
    height: 56,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 16,
    backgroundColor: '#fff',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
    zIndex: 999, // 头部的层级
  },
  menuBtn: {
    padding: 8,
  },
  headerTitle: {
    fontSize: 18,
    fontWeight: '600',
  },
  rightBtn: {
    padding: 8,
  },
});

export default SharedHeader;

步骤2：配置DrawerNavigator全局应用头部 #

在DrawerNavigator的screenOptions里统一设置header为我们的共享组件，同时调整抽屉的层级，确保它展开时在头部上方：

import { createDrawerNavigator } from '@react-navigation/drawer';
import SharedHeader from './SharedHeader';
import HomeScreen from './screens/HomeScreen';
import ProfileScreen from './screens/ProfileScreen';
import SettingsScreen from './screens/SettingsScreen';

const Drawer = createDrawerNavigator();

const AppDrawer = () => {
  return (
    <Drawer.Navigator
      screenOptions={{
        // 全局应用共享头部
        header: (props) => <SharedHeader {...props} />,
        // 设置抽屉样式，确保层级高于头部
        drawerStyle: {
          width: '70%',
          zIndex: 1000, // 抽屉层级比头部高
        },
        // 可选：调整抽屉的其他样式
        drawerType: 'front',
      }}
    >
      <Drawer.Screen 
        name="Home" 
        component={HomeScreen}
        options={{ headerTitle: '首页' }} // 给当前页面自定义标题
      />
      <Drawer.Screen 
        name="Profile" 
        component={ProfileScreen}
        options={{ headerTitle: '我的' }}
      />
      <Drawer.Screen 
        name="Settings" 
        component={SettingsScreen}
        options={{ headerTitle: '设置' }}
      />
    </Drawer.Navigator>
  );
};

export default AppDrawer;

方案二：嵌套StackNavigator（优化版） #

如果你因为某些原因需要保留StackNavigator的嵌套（比如部分页面需要单独的导航栈逻辑），可以把共享头部提升到DrawerNavigator的父级Stack里，这样所有子页面都会复用这个头部：

import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer';
import SharedHeader from './SharedHeader';
import HomeScreen from './screens/HomeScreen';
import ProfileScreen from './screens/ProfileScreen';

const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();

// 抽屉内容
const DrawerContent = () => (
  <Drawer.Navigator
    drawerStyle={{ zIndex: 1000 }}
  >
    <Drawer.Screen name="Home" component={HomeScreen} />
    <Drawer.Screen name="Profile" component={ProfileScreen} />
  </Drawer.Navigator>
);

// 外层Stack统一设置共享头部
const AppNavigator = () => {
  return (
    <Stack.Navigator
      screenOptions={{
        header: (props) => <SharedHeader {...props} />,
        headerStyle: { zIndex: 999 },
      }}
    >
      <Stack.Screen name="Drawer" component={DrawerContent} />
    </Stack.Navigator>
  );
};

export default AppNavigator;

这个方案适合需要给部分页面单独加栈逻辑的场景，头部依然只渲染一次，不会重复渲染。

关键优化点 #

• 用React.memo包裹共享头部组件，只有当props变化时才重新渲染，避免不必要的性能损耗
• 通过zIndex控制层级，确保抽屉的层级高于头部，实现抽屉覆盖头部的效果
• 集中配置头部，避免每个页面重复写相同的头部逻辑

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