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

Question

我正在尝试更改我的活动选项卡标题颜色，我尝试使用选项卡栏选项，但它不起作用。

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

我阅读了文档并搜索了示例，但找不到任何适合我的东西.
就像该应用程序只是忽略了选项卡栏选项一样。

我做错了什么？

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

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

Answer 2

从文档中更改选项卡标签样式看起来，您 需要提供自定义组件来选项卡栏标签属性并根据重点进行更新。

试试这个

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

Answer 3

in NavigationContainerV6

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