React Navigation 6：如何为头部添加底部边框并修改边框颜色？

问题原因 #

你之前的配置无效，是因为把边框样式直接写在了options的根层级，而React Navigation 6.x中，头部容器的样式属性需要嵌套在headerStyle对象内才会生效。

正确配置示例 #

options={{
  // 控制iOS端阴影显示
  headerShadowVisible: true,
  headerStyle: {
    // 设置底部边框
    borderBottomColor: 'red',
    borderBottomWidth: 4,
    // Android端若要移除默认阴影，添加此行
    elevation: 0,
  },
}}

自定义头部的情况处理 #

如果你的头部是通过header选项自定义的组件，需要在自定义的头部容器View中直接添加边框样式：

options={{
  header: () => (
    <View style={{ 
      height: 56, 
      backgroundColor: '#fff',
      borderBottomColor: 'red',
      borderBottomWidth: 4,
      alignItems: 'center',
      justifyContent: 'center'
    }}>
      <Text>自定义头部</Text>
    </View>
  ),
}}

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