如何更改活动/选定选项卡的颜色?
问题描述:
我找不到在标签栏中更改标题颜色的方法。 这是我的代码:如何更改活动/选定选项卡的颜色?
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}}
/>
),
//headerStyle: {backgroundColor: "#553A91"},
//headerTitleStyle: {color: "#FFFFFF"},
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 }}
/>
),
//headerStyle: {backgroundColor: "#553A91"},
//headerTitleStyle: {color: "#FFFFFF"},
header: null,
}),
},
}),
}
我搜查,但未能找到一个方法来做到这一点。 当选项卡没有被选中时,我希望颜色成为默认的灰色,但是当选中选项卡时,颜色为我的tabBarColor
颜色。
我该怎么做?
在此先感谢!
答
不知道你在哪里搜索,但花了30秒才看到它。
在TabNavigator Docs,很显然,你需要使用activeTintColor
activeTintColor
:活动选项卡的标签和图标的颜色
例子:
const MyApp = TabNavigator({
Home: {
screen: MyHomeScreen,
},
Notifications: {
screen: MyNotificationsScreen,
},
}, {
tabBarOptions: {
activeTintColor: '#e91e63',
},
});
无法看到我怎么错过了。谢谢! –
很高兴我们能够帮助! –
我应该在哪里添加tabBarOptions?我试图添加它,但它不会工作:( –