react-native - React Native 的弯曲底部导航栏

我看到了一个 Flutter 底部导航包，看起来很不错。

基本上，它看起来像这样

我正在尝试在 React Native 中复制它（首先是 UI，然后将在动画上工作）但没有成功。真的可以在 React Native 中复制它吗？

我能得到的最接近的是如图所示。然而，我使用了 4 种不同的形状定位为绝对来实现这一点。

这张图片区分了我用来形成导航栏的形状（灰色、橙色、红色和蓝色）。

如果有办法使这个完美，请告诉我（没有像我那样的变通办法更好）。

非常感谢。

标签： react-nativereact-navigation

接近的方法是使用这样的视图。

用黄色遮住红色部分，或者对红色应用相同的背景颜色。它看起来像这样。

由于我找不到如何屏蔽它，我只是将背景颜色应用于红色视图。

然后您可以使用动画和插值来移动单击事件上的整个形状。

最终产品将如下所示。