如何在React Native中制作像弧形底部标签栏这样复杂的设计？

Question

我是应用程序开发新手。我想在应用程序中制作一个如下所示的标签栏，但我不能。我尝试通过样式来做到这一点，但它没有响应。我怎样才能做到这一点？

Answer 1

对于这些非正统的形状，最好使用 SVG 制作自己的形状，并使用重新启动的库制作动画。你会在 GitHub 中找到很多类似的作品。

这实际上可能对您有帮助，https://github.com/nomi9995/react-native-curved-bottom-tabbar这并不完全是您的要求，但如果您仔细阅读代码，您就会明白的

这个也是https://www.npmjs.com/package/react-native-curved-bottom-bar

Answer 2

有一种叫做约束的东西，它是移动设备上元素的定位，如果你了解它是如何工作的，那对你来说会更容易，https://developer.android.com/reference/androidx/constraintlayout/widget/约束布局。我知道这不是答案，但移动样式与 Web 不同，您也可以检查此 Flexbox 实现以供参考：https://www.javatpoint.com/react-native-positioning-element-with-flex

Answer 3

尝试以下步骤。

1. 创建圆形视图（高度=宽度，borderRadius=高度/2）
2. 添加边框，颜色为 10-20 左右
3. 使其绝对并将Self对齐到中心。
4. 新建为底部栏创建新视图，背景颜色和高度，宽度：'100%'
5. 在条形视图后添加圆形视图并给出（底部=

Answer 4

你可以看看我用 svg 做的零食

https://snack.expo.dev/@annveeadmin/svg-bottam-tab