react-native - 如何使用 React Navigation 在 React Native 的标签栏上制作圆角？

Question

堆:

react 原生

react 导航器

仅核心组件

我在 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
  },
})

我一直评论绝对位置，角落后面总是有背景，当另一种颜色的组件滚动时，它看起来很奇怪。
在这里，为了能见度，它以黄色着色:

如果我取消对绝对位置的注释，内容会在标签栏后面流动，使其感觉更自然。
但...
我需要在每个屏幕上添加一个底部边距来补偿选项卡占用的空间，或者底部的内容被隐藏。
我觉得应该有一个好的实践或已知的模式，也许是一个经过测试的解决方法，这会让我的生活更轻松。你有想法吗？
谢谢

Answer 1

啊，这很简单，经过反复试验后，我发现只需向其中添加 Border Radius 并确保 barStyle 已 overflow hidden 。在这里，我粘贴了它的片段。

barStyle:{
    borderRadius:50,
    backgroundColor:"orange",
    position: 'absolute',
    overflow:'hidden',
    left: 0,
    bottom: 0,
    right: 0,
    padding:5,
}