默认情况下如何在反应导航中的所有选项卡上显示指示器

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 -非活动标签的背景颜色。