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