React Navigation自定义header红色视图无法覆盖蓝色背景问题

问题根因 #

headerTitle属性仅控制导航栏中间的标题展示区域，并非整个导航栏容器，所以自定义的红色Header只会覆盖中间部分，其余区域仍展示headerStyle中配置的浅蓝色背景。

解决方案 #

方案1：直接替换整个导航栏（推荐）

使用header属性直接替换整个导航栏组件，彻底移除默认导航栏的样式影响：

1. 修改HomeStack.js配置：

const options = {
  defaultNavigationOptions: {
    // 替换headerTitle为header，直接返回自定义Header
    header: () => <Header/>,
    // 原headerStyle配置可直接删除，不再生效
  }
}

2. 调整Header.js容器样式适配导航栏尺寸：

const style = StyleSheet.create({
  conteiner: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'red',
    // 新增高度和宽度适配，可按需补充状态栏适配的paddingTop
    height: 60,
    width: '100%'
  },
  text: {
    color: '#fff',
    fontSize: 20,
  }
})

方案2：扩展标题区域撑满导航栏

如果不需要替换整个导航栏，仅需让标题区域铺满导航栏，修改两处配置即可：

1. 修改HomeStack.js配置，移除标题容器默认边距：

const options = {
  defaultNavigationOptions: {
    headerTitle: () => <Header/>,
    headerStyle: {
      backgroundColor: 'lightblue',
      height: 60,
    },
    // 新增标题容器样式配置
    headerTitleContainerStyle: {
      marginHorizontal: 0,
      width: '100%',
      height: '100%'
    }
  }
}

2. 调整Header.js容器样式撑满父容器：

const style = StyleSheet.create({
  conteiner: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'red',
    // 新增宽高配置
    width: '100%',
    height: '100%'
  },
  text: {
    color: '#fff',
    fontSize: 20,
  }
})

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