react-native-elements：Header 呈现意外的底部边框

Question

我在使用 react-native-elements 的 Header 组件时遇到了一个奇怪的问题。这是我所看到的：

这是代码：

<Header
    leftComponent={{ icon: 'menu', color: '#85106a',  }}
    rightComponent={<Avatar
        small
        rounded
        source={{uri: "https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg"}}
        onPress={() => console.log("Works!")}
        activeOpacity={0.7}
    />}
    statusBarProps={{ barStyle: 'dark-content', translucent: true }}
/>

我希望底部的边框与汉堡菜单的颜色相同。翻遍了组件的文档，没有找到任何实质内容。

非常感谢任何想法。谢谢

Answer 1

我试过你的项目，所以你需要在 header 组件上添加道具 containerStyle 并像这样更改样式：

<Header
  leftComponent={{ icon: 'menu', color: '#85106a',  }}
  rightComponent={<Avatar
                small
                rounded
                source={{uri: "https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg"}}
                onPress={() => console.log("Works!")}
                activeOpacity={0.7}
            />}
  statusBarProps={{ barStyle: 'dark-content', translucent: true }}
  containerStyle={{ borderBottomColor:'#85106a',borderBottomWidth:1 }}
/>

然后结果：

希望这个回答能帮到您

Answer 2

请注意 post 的未来访客：

在最新版本的react-native-elements (1.1.0)中，覆盖header容器样式的属性outerContainerStyles已更改为containerStyle

react-native-elements：Header 呈现意外的底部边框

react-native-elements: Header rendering unexpected bottom border

reactjs

react-native

react-native-ios