react-native - 有没有办法更改顶部选项卡导航器的字体颜色和下划线颜色？

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

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

对于指标，使用 indicatorStyle 如下。

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

  indicatorStyle :{
        backgroundColor:'red'
  }

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