底部导航栏的反应本机复杂形状

Question

我想在我的本机项目中为底部导航获得特定的视图形状。 它是一个带有中心圆形状的矩形。我需要将两者合并在一个视图中，因为我需要从中投射阴影（在Android上为高程，在iOS上为阴影道具）。这是样机：

关于如何实现这一目标的任何线索？谢谢。

Answer 1

您可以像在this tutorial中那样简单地覆盖tabBarIcon并使用zIndex来摆脱困境。

否则，可以使用类似以下内容覆盖整个tabBarComponent：

createBottomTabNavigator(
  navigators,
  {
    tabBarComponent: props => <CustomTabBar {...props} />
  }
)

Here is a link到默认的tabBarComponent，可在创建自己的CustomTabBar组件时用作参考。

阴影可能难以实现。使用纯React Native，您可以有2个圆，一个在阴影矩形下方，一个在矩形上方以将阴影隐藏在底部圆上方。然后将阴影添加到矩形和底圆上，以免在圆和矩形相交的角处有较暗的阴影。如果最终效果仍然不好，则实心边框可能比阴影效果更好。