我遇到了来自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 }}
/>
我希望底部的边框与汉堡菜单的颜色相同。我查看了组件的文档,但没有发现任何重要内容。
任何想法都非常感谢。谢谢
我已经尝试了你的项目,所以你需要在header组件上添加道具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 }}
/>
然后结果:
我希望这个答案可以帮到你
请注意此帖子的未来访问者:
在react-native-elements(1.1.0)的最新版本中,覆盖标题容器outerContainerStyles
样式的道具已更改为containerStyle