无法更改标签栏标签的颜色答案

【问题标题】：Can't change tabbar label's color无法更改标签栏标签的颜色
【发布时间】：2017-08-05 10:32:54
【问题描述】：

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

  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。

提前致谢！

【问题讨论】：

标签： react-native

【解决方案1】：

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

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

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 在上一条评论中提到的那样，您应该为标签栏中的每个标签都这样做。

【讨论】：

将活动尖齿颜色添加到我的 BottomTab.Navigator tabBarOptions 做到了，谢谢

【解决方案2】：

看起来从文档中更改 tabBarLabel style，你需要为 tabBarLabel 属性提供自定义组件，并根据焦点进行更新。

试试这个

navigationOptions: () => ({
  tabBarLabel: ({focused}) => <MyTabBarLabel title={i18n.t('common.request')} focused={focused} />,
  tabBarIcon: ({focused}) => <MyTabBarIcon icon='requests' focused={focused}/>
})

MyTabBarLabel 组件示例

export default function MyTabBarLabel (props) {

  return (
    <WFText style={[styles.tabBarLabel,  props.focused? styles.tabBarLabelActive : {}]} >{props.title}</WFText>
  );
}

const styles = StyleSheet.create({
  tabBarLabel: {
    paddingBottom: 6,
    fontSize: 10,
    textAlign: 'center'
  },
  tabBarLabelActive: {
    color: 'red'
  }
});

用你的组件代替 MyTabBarLabel 和 MyTabBarIcon

参考： https://reactnavigation.org/docs/navigators/tab#Screen-Navigation-Options

【讨论】：

首先，谢谢 :D，我应该在哪里添加它？你在哪里找到这个文档的？我现在又看了一遍文档，在那里看不到。
我已经添加了参考现在检查
谢谢，但我仍然可以看到 tabBarOptions 解决方案，你确定它改变了吗？我也不知道应该在哪里添加您的解决方案。
为 TabNavigator 中的每个屏幕覆盖 navigationOptions，以动态为每个选项卡的标签和图标提供自定义样式。而 tabBarOptions 用于为选项卡提供样式，例如其高度、整个选项卡颜色、单个选项卡样式等。但是您不能使用 tabBarOptions 动态更改样式，例如更改焦点上的标签或图标的颜色。为此，您需要使用 navigationOptions 并为每个选项卡屏幕覆盖它，并使用其焦点道具检查和更新标签颜色和图标。

【解决方案3】：

在 NavigationContainer V6 中

<Tab.Navigator
    screenOptions={({ route }) => ({
      tabBarActiveTintColor: 'tomato',
      tabBarInactiveTintColor: 'gray',
    })}
  >

【讨论】：