底部导航栏的React-native复杂形状

Question

我想在我的react-native项目中为我的底部导航实现特定的视图形状。它是一个中心圆形的矩形。我需要在一个视图中合并两者，因为我需要从中投射阴影（Android上的高程，iOS上的影子道具）。这是模型：

有关如何实现这一点的任何线索？谢谢。

Answer 1

你可以在tabBarIcon中简单地覆盖this tutorial并与zIndex一起玩耍。

否则，可以用以下方式覆盖整个tabBarComponent：

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

Here is a link到默认的tabBarComponent，你可以用它来创建你自己的CustomTabBar组件。

阴影可能难以实现。使用纯React Native，您可以有2个圆圈，一个位于阴影矩形下方，一个位于矩形上方以隐藏底部圆圈上方的阴影。然后将阴影添加到矩形和底部圆圈，冒着在圆形和矩形相交的角落处出现阴影的风险。如果这看起来并不好看，那么实心边框可能比阴影效果更好。