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

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

看起来像从文档改变tabBarLabel 风格，你 需要提供自定义组件基于集中tabBarLabel道具和更新。

尝试一下本作MyTabBarLabel组件

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

例

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