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

Question

堆：

• 反应本机
• 反应导航器
• 仅核心组件

我在 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

啊，很简单，经过反复试验，我发现只需添加边框半径即可，并确保 barStyle 已隐藏溢出。我在这里粘贴了它的片段。

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