react-navigation自定义Header与设备边缘存在间隙的原因排查

我正在使用react-navigation开发应用，将默认头部替换为自定义组件，代码如下：

const CustomHeader = () => {
    return (
        <View style={styles.header}>
            <Text style={{color: 'white'}}>Welcome Stranger!</Text>
            <Image
                style={{ width: 50, height: 50 }}
                source={require("./assets/logo.png")}
            />
        </View>
    );
}

styles.header（其中deviceWidth = Dimensions.get("window").width）：

header: {
        flex: 1,
        flexDirection: "row",
        justifyContent: 'flex-start',
        alignItems: "center",
        width: deviceWidth,
        borderBottomColor: colors.primary,
        borderBottomWidth: 2
    }

但Header组件未对齐，左侧存在间隙且右侧溢出，效果如下：

问题原因 #

• 左侧间隙：React Navigation的默认Header容器自带内边距，自定义Header被嵌套在该容器中，容器的内边距直接造成了左侧间隙。
• 右侧溢出：强制设置width: deviceWidth，没有考虑容器内边距、状态栏或系统导航栏的占用空间，导致组件宽度超出可用显示区域。

解决方案 #

1. 移除固定宽度设置，改用百分比宽度让组件自适应容器：
   将width: deviceWidth替换为width: '100%'，同时删除多余的flex: 1（Header组件不需要撑满父容器高度）。
2. 清除默认容器内边距：
   在导航配置的options中添加headerStyle: { paddingHorizontal: 0 }，消除容器自带的左右内边距。
3. 自定义内边距（可选）：
   根据需求给自定义Header添加合适的paddingHorizontal，保证内容不会贴边。

修改后的styles.header示例：

header: {
    flexDirection: "row",
    justifyContent: 'flex-start',
    alignItems: "center",
    paddingHorizontal: 16, // 自定义左右内边距
    borderBottomColor: colors.primary,
    borderBottomWidth: 2,
    width: '100%'
}

导航配置示例：

<Stack.Screen
    name="Home"
    component={HomeScreen}
    options={{
        header: () => <CustomHeader />,
        headerStyle: { paddingHorizontal: 0 }
    }}
/>

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