react-native - 如何在反应导航中默认在所有选项卡上显示指示器

Question

我的一个反应原生组件中有一个基于标签的导航。我正在使用 React Navigation v1。React Navigation 仅显示当前活动选项卡的选项卡指示器。

但是，我希望每个选项卡默认显示选项卡指示器（选项卡上的下边框），但当然颜色不同。并且当激活时，每个选项卡将显示略有不同的颜色阴影。

我尝试过使用 React Navigation v1、v2、Native Base。找不到解决办法。

我希望标签栏与这张图片完全一样。

在 React Navigation 中，我们有这样的东西：

TabNavigator(
  { 
    Tab1: { screen: Tab1Component },
    Tab2: { screen: Tab2Component }
  },
  {
    tabBarComponent: TabBarTop,
    tabBarPosition: 'top',
    tabBarOptions: {
      indicatorStyle: {
        borderBottomColor: '#6495ed',
        borderBottomWidth: 2
      }
    }
  }
)

但这会将样式添加到整个选项卡中。我希望在每个选项卡的基础上应用一些能力。与 Native Base 的tabBarUnderlineStyle.

Answer 1

您应该在TabNavigatorConfig内的tabBarOptions中使用此道具

activeTintColor - 活动选项卡的标签和图标颜色。

activeBackgroundColor - 活动选项卡的背景颜色。

inactiveTintColor - 非活动选项卡的标签和图标颜色。

inactiveBackgroundColor - 非活动选项卡的背景颜色。