如何使用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,}