无法更改标签栏标签的颜色 [英] Can't change tabbar label's color

问题描述

我正在尝试更改活动选项卡标题颜色，我尝试使用 tabBarOptions 但它不起作用，我做错了什么?这是我的代码:

I'm trying to change my active tab title color, I tried using tabBarOptions but It just won't work, what am I doing wrong? This is my code:

  Home:{
screen: TabNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: ({ navigation }) => ({
      title: 'Home',
      tabBarIcon: ({ tintColor, focused }) => (
        <Ionicons
        name={focused ? 'ios-home' : 'ios-home-outline'}
        size={26}
        style={{ color: focused ? `${tabBarColor}` : tintColor}}
        />
      ),
      header: null,
    }),
  },
  Profile: {
    screen: ProfileScreen,
    navigationOptions: ({ navigation }) => ({
      title: 'Profile',
      tabBarIcon: ({ tintColor, focused }) => (
        <Ionicons
        name={focused ? 'ios-people' : 'ios-people-outline'}
        size={26}
        style={{ color: focused ? `${tabBarColor}` : tintColor }}
        />
      ),
      header: null,
    }),
  },
}),
tabBarOptions:{
  activeTintColor: `${tabBarColor}`,
}
}

我阅读了文档并搜索了示例，但找不到任何对我有用的内容.这就像应用程序只是忽略了 tabBarOptions.

I read I the documentation and searched for examples but couldn't find anything that worked for me. It's like the app is just ignoring the tabBarOptions.

提前致谢！

推荐答案

回答可能有点晚，但这里是该问题的另一个有效解决方案，因为现有答案中的链接已损坏.

Maybe a little bit late to answer, but here is another valid solution for the problem, since the link in the already existing answer is broken.

您无需创建自定义组件即可更改标签栏中的文本颜色.

You do not need to create the custom component to change the text color in the tab bar.

navigationOptions = {
    tabBarLabel: 'Navigation Title',
    tabBarOptions: { 
        activeTintColor: '#000',
        inactiveTintColor: '#fff',
},
tabBarIcon: ({ focused }) => (
    <TabBarIcon
        focused={focused} /* Change the icon */
        name={Platform.OS === 'ios' ? 'ios-link' : 'md-link'}/>
    ),
};

通过使用 tabBarOptions 中的 activeTintColor 和 inactiveTintColor 道具，您可以操纵标签栏中文本的颜色.正如@Ravi Raj 在上一条评论中提到的，您应该为标签栏中的每个标签执行此操作.

By using the activeTintColor and inactiveTintColor props in tabBarOptions, you can manipulate the color of the text in the tab bar. As @Ravi Raj mentioned in the last comment, you should do it for each of the tabs in the tab bar.

这篇关于无法更改标签栏标签的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！