React Navigation 5自定义头部组件：赋值header无显示需拆分设置？

嘿，我来帮你捋清楚React Navigation 5里自定义头部的问题！你遇到的直接给header赋值组件却没显示的情况，其实是踩了个小坑——React Navigation对header这个配置项的要求比你想的要具体一点，不是随便扔个组件就行的。

为啥直接设header: () => <HeaderComponent />没反应？ #

主要有两个原因：

• 你的自定义组件没接收React Navigation传递的导航props（比如navigation、route），部分场景下组件会因为缺少必要参数无法正常渲染；
• 组件没设置基础样式（比如高度、背景色），导致它高度为0，看起来就像“没显示”。

举个例子，如果你写的HeaderComponent只是个纯文本组件，没设置高度，那它在页面上就是不可见的。

正确的完整自定义头部写法 #

要让自定义头部正常显示，你需要让组件接收导航props，并且给头部设置合适的样式：

// 自定义头部组件，接收导航相关props
const CustomHeader = ({ navigation, route }) => {
  return (
    <View 
      style={{ 
        height: 60, // 必须设置高度，和默认导航栏高度一致
        backgroundColor: '#fff',
        paddingHorizontal: 16,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between'
      }}
    >
      {/* 左侧返回按钮 */}
      <TouchableOpacity onPress={() => navigation.goBack()}>
        <Text style={{ fontSize: 16 }}>返回</Text>
      </TouchableOpacity>
      {/* 标题 */}
      <Text style={{ fontSize: 18, fontWeight: 'bold' }}>{route.name}</Text>
      {/* 右侧菜单按钮 */}
      <TouchableOpacity onPress={() => navigation.openDrawer()}>
        <Text style={{ fontSize: 16 }}>菜单</Text>
      </TouchableOpacity>
    </View>
  );
};

// 在Stack.Screen中使用
<Stack.Screen 
  name="IndexScreen" 
  component={IndexScreen} 
  options={{ header: (props) => <CustomHeader {...props} /> }} 
/>

这样写之后，你的自定义头部就能正常显示了——因为我们给它设置了和默认导航栏一致的高度，还传递了导航必需的props。

解决重复代码：别再挨个写headerLeft/Title/Right了 #

如果每个屏幕都重复写这三个配置，确实太繁琐，给你两个高效的解决方案：

方案1：给Stack Navigator设置全局默认配置 #

在创建Stack Navigator的时候，直接把通用的头部配置写在screenOptions里，所有屏幕都会自动继承，个别需要修改的屏幕再单独覆盖：

const Stack = createStackNavigator();

const AppStack = () => {
  return (
    <Stack.Navigator
      // 全局默认头部配置
      screenOptions={{
        headerLeft: () => <HeaderLeftComponent />,
        headerTitle: () => <HeaderTitleComponent />,
        headerRight: () => <HeaderRightComponent />
      }}
    >
      <Stack.Screen name="IndexScreen" component={IndexScreen} />
      {/* 特殊屏幕单独修改头部 */}
      <Stack.Screen 
        name="SpecialScreen" 
        component={SpecialScreen} 
        options={{ headerTitle: () => <SpecialTitleComponent /> }} 
      />
    </Stack.Navigator>
  );
};

方案2：封装复用的配置函数 #

把通用的头部配置封装成一个函数，每个屏幕直接调用，需要修改的地方再扩展这个对象：

// 封装通用头部配置
const getDefaultHeaderOptions = () => ({
  headerLeft: () => <HeaderLeftComponent />,
  headerTitle: () => <HeaderTitleComponent />,
  headerRight: () => <HeaderRightComponent />
});

// 普通屏幕直接使用
<Stack.Screen 
  name="IndexScreen" 
  component={IndexScreen} 
  options={getDefaultHeaderOptions()} 
/>

// 需要修改右侧组件的屏幕，扩展配置
<Stack.Screen 
  name="AnotherScreen" 
  component={AnotherScreen} 
  options={{
    ...getDefaultHeaderOptions(),
    headerRight: () => <CustomHeaderRightComponent />
  }} 
/>

最后总结一下 #

• 用header属性自定义完整头部时，一定要记得传递导航props并设置基础样式，不然容易出现“没显示”的问题；
• 想避免重复代码，优先用全局screenOptions或者封装配置函数，比挨个写三个属性高效多了；
• 如果只是要修改头部的某一部分，单独设置对应的headerLeft/headerTitle/headerRight比替换整个header更灵活。

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