是否可以更改顶部标签导航器的字体颜色和下划线颜色？

Question

我正在设置顶部TabNavigator的新组件，我想更改字体的颜色和标记每个标签的下划线的颜色

这是一个新组件

const TabNavigator = createMaterialTopTabNavigator(
  {
    Products: Results,
    Brands: Results,
    Categories: Results,
    UPC: Results,
    Tags: Results,
  },
  {
    tabBarOptions: {
      style: {
        backgroundColor: 'grey',
      },
      labelStyle: {
        fontSize: 9,
        margin: 0,
        padding: 0,
        fontFamily: 'Poppins-bold',
      },
    },
  }
)

我希望更改字体的颜色和标记每个选项卡的下划线的颜色。

Answer 1

您可以通过在样式activeTintColor中添加inactiveTintColor和tabBarOptions来更改字体的背景颜色。

对于指示器，请按如下所示使用indicatorStyle。

tabBarOptions: {
  activeTintColor: "white", 
  inactiveTintColor: "blue", 

  indicatorStyle :{
        backgroundColor:'red'
  }

  style: {
    backgroundColor: 'grey', 
  },
  labelStyle: {
    fontSize: 9,
    margin: 0,
    padding: 0,
    fontFamily: 'Poppins-bold',
  },
}