如何解决如何使用React Navigation在React Native的选项卡栏上制作圆角?
堆栈:
- 反应原生
- 反应导航器
- 仅核心组件
我在TabNavigator.tsx上具有这种样式:
const styles = StyleSheet.create({
tabStyle: {
backgroundColor: colors.background,borderTopLefTradius: 40,borderTopRighTradius: 40,height: 80,overflow: 'hidden',// position: 'absolute',// needed to ensure the bar has a transparent background in the corners
},})
我一直评论绝对位置,角落里总是有一个背景,当另一种颜色滚动时,它看起来很奇怪。
这里是黄色,以提高可见度:
如果我取消对绝对位置的注释,则内容会在选项卡栏的后面流动,使它显得更加自然。
但是...
我需要在每个屏幕上添加一个底边距,以补偿标签占用的空间,否则底部的内容将被隐藏。
我觉得应该有一个好的习惯或已知的模式,也许是经过测试的解决方法,这将使我的生活更轻松。你有主意吗?
谢谢
解决方法
啊,这很简单,经过反复试验后,我发现只需向其中添加 Border Radius 并确保 barStyle 已隐藏溢出。我在这里粘贴了它的片段。
barStyle:{
borderRadius:50,backgroundColor:"orange",position: 'absolute',overflow:'hidden',left: 0,bottom: 0,right: 0,padding:5,}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。