Can't change tabbar label's color

Question

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}`,
}
}

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.

Thanks in advance!

Answer 1

Looks like from the documentation to change tabBarLabel style, you need to provide custom component to tabBarLabel props and update based on focused.

try this

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

Example for MyTabBarLabel component

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'
  }
});

Replace with your components in place of MyTabBarLabel and MyTabBarIcon

Refer: https://reactnavigation.org/docs/navigators/tab#Screen-Navigation-Options

Answer 2

回答也许有点晚，但是这是该问题的另一个有效解决方案，因为已经存在的答案中的链接已断开。

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

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'}/>
    ),
};

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