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

时间:2017-08-15 01:20:40

标签: reactjs react-native react-native-ios

我遇到来自react-native-elements的Header组件的一个奇怪问题。 这就是我所看到的: enter image description here

这是代码:

<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 }}
/>

我希望底部的边框与汉堡菜单的颜色相同。我仔细查看了组件的文档,但没有发现任何重要内容。

非常感谢任何想法。谢谢

2 个答案:

答案 0 :(得分:1)

我已经尝试了你的项目,所以你需要在标题组件上添加道具outerContainerStyles并改变这样的样式:

<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 }}
  outerContainerStyles={{ borderBottomColor:'#85106a',borderBottomWidth:1 }}
/>

然后结果:

docs

我希望这个答案可以帮到你

答案 1 :(得分:0)

此帖子的未来访问者注意:

在最新版本的react-native-elements(1.1.0)上,用于覆盖标头容器outerContainerStyles样式的道具已更改为containerStyle