react-native - 无法更改标签栏标签颜色

Question

我正在尝试更改事件选项卡标题颜色，我尝试使用 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。

提前致谢!

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

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