React Navigation v6 如何创建可自动继承属性的自定义Header组件

解决方法 #

你的问题核心是手动覆盖了RNNHeader的title属性，导致组件内置的默认标题、返回按钮等逻辑被覆盖失效。React Navigation v6 的Header组件已经内置了标题解析、返回按钮渲染等所有原生header的逻辑，不需要手动处理这些属性，直接透传即可，同时需要先关闭默认的分隔线避免和自定义图片条冲突。

第一步：修改Navigator配置，关闭默认分隔线

<Stack.Navigator
  initialRouteName="NoConnectionContent"
  screenOptions={{
    header: (props) => <Header {...props} />,
    headerStyle: {
      backgroundColor: 'white',
      elevation: 0, // 安卓端移除默认阴影
      borderBottomWidth: 0, // iOS端移除默认底部边框
    },
    headerShadowVisible: false, // 全局关闭header默认阴影分隔线
  }}
>
  <Stack.Screen
    name="NoConnectionContent"
    component={NoConnectionContent}
    options={{title: 'No connection'}}
  />
  <Stack.Screen name="Home" component={HomeScreen} />
  <Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>

第二步：修正自定义Header组件

import React from 'react';
import {View, StyleSheet, Image} from 'react-native';
import Config from 'react-native-config';
import { Header as RNNHeader } from '@react-navigation/elements';

const Header = (props) => {
  const headerStripSource = Config.ENV === 'dev'
    ? require('../../assets/images/devhead.jpg')
    : require('../../assets/images/prodhead.jpg');

  return (
    <View style={styles.headerContainer}>
      {/* 直接透传所有props即可，不需要手动处理title、返回按钮等属性 */}
      <RNNHeader {...props} />
      <Image 
        source={headerStripSource} 
        style={styles.headStripImageStyle}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  headerContainer: {
    width: '100%',
  },
  headStripImageStyle: {
    resizeMode: 'stretch',
    height: 10,
    width: '100%',
  },
});

说明

修改后所有默认header的配置都会自动生效：包括单页面自定义的标题、返回按钮显示隐藏、左右自定义按钮、标题样式等，全部继承你在screenOptions或者单页面options里的配置，不需要额外手动处理。

内容的提问来源于stack exchange，提问作者Petrik-a-dost