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

Question

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

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

Answer 1

您可以像在 this tutorial 中一样简单地覆盖 tabBarIcon 并使用 zIndex.

否则，可以用类似的东西覆盖整个 tabBarComponent：

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

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

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

React-native complex shape for bottom nav bar