react-native-elements:标题呈现意外的底部边框

Question

我遇到了一个来自react-native-element的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

我已经尝试过你的项目，所以你需要在标题组件上添加道具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

这篇文章的未来访问者请注意：

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