React Native的弧形底部导航栏

Question

我看到了Flutter底部导航软件包，看起来非常不错。

Curved Navigation Bar (Flutter)

基本上，它看起来像this

我正在尝试在React Native中复制它（首先是UI，然后可以在Animation上运行），但是没有成功。实际上可以在React Native中复制它吗？

我能得到的最接近的图像如图this所示。但是，我使用4种不同的形状定位为绝对形状。

This图像区分了我用来形成导航栏的形状（灰色，橙色，红色和蓝色）。

请告诉我是否有一种方法可以使此完美（最好不要像我那样解决）。

非常感谢您。

Answer 1

有一个库react-native-tabbar-interaction，您可以尝试一下。根据需要看起来类似

Answer 2

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

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

由于找不到遮罩，因此我将背景色应用于红色视图。

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

最终产品将如下所示。

我已经在https://www.npmjs.com/package/rn-curved-navigation-bar

上发布了相同的内容

或者您可以签出并在github上克隆项目