React native 更改抽屉中活动菜单图标的颜色
我正在创建我的第一个react本机应用程序,我想更改抽屉导航的css。我已经尝试使用activeTintColor更改颜色,但它不起作用。我只想更改图标颜色或处于活动状态的菜单项 我所做的是:React native 更改抽屉中活动菜单图标的颜色,react-native,react-native-navigation,React Native,React Native Navigation,我正在创建我的第一个react本机应用程序,我想更改抽屉导航的css。我已经尝试使用activeTintColor更改颜色,但它不起作用。我只想更改图标颜色或处于活动状态的菜单项 我所做的是: const DrawerNavigation = createDrawerNavigator({ Page1: { screen: MainTabNavigator, navigationOptions: { drawerLabel: 'Home' },
const DrawerNavigation = createDrawerNavigator({
Page1: {
screen: MainTabNavigator,
navigationOptions: {
drawerLabel: 'Home'
},
contentOptions: {
activeTintColor: 'rgb(234, 94, 32)'
}
},
page2: {
screen: AboutUs,
navigationOptions: {
drawerLabel: 'About Us'
},
contentOptions: {
activeTintColor: 'rgb(234, 94, 32)'
}
},
Page3: {
screen: LogoutScreen,
navigationOptions: {
drawerLabel: 'Logout'
},
contentOptions: {
activeTintColor: 'rgb(234, 94, 32)'
}
}
},
{
initialRouteName: 'Page1',
contentComponent: CustomDrawerContentComponent
});
如果在激活时需要对所有菜单项使用相同的颜色,这将有助于您
const DrawerNavigation = createDrawerNavigator({
Page1: {
screen: MainTabNavigator,
navigationOptions: {
drawerLabel: 'Home'
},
},
page2: {
screen: AboutUs,
navigationOptions: {
drawerLabel: 'About Us'
},
},
Page3: {
screen: LogoutScreen,
navigationOptions: {
drawerLabel: 'Logout'
},
}
},
{
initialRouteName: 'Page1',
contentOptions: {
activeTintColor: 'rgb(234, 94, 32)'
}
});
根据
react导航抽屉版本2.3.3
,我建议在navigationOptions
在本例中,我使用了expo/vector icons
中的Ionicons
作为图标
const DrawerNavigation = createDrawerNavigator({
Page1: {
screen: MainTabNavigator,
navigationOptions: {
drawerLabel: 'Home',
drawerIcon: (tabInfo) => {
return <Ionicons
name='ios-restaurant'
size={25}
color={tabInfo.tintColor}
/>
},
},
contentOptions: {
activeTintColor: 'rgb(234, 94, 32)'
}
},
....
....
....
const DrawerNavigation=createDrawerNavigator({
第1页:{
屏幕:MainTabNavigator,
导航选项:{
抽屉标签:“家”,
付款人:(tabInfo)=>{
返回
},
},
内容选项:{
activeTintColor:'rgb(234,94,32)'
}
},
....
....
....
我想他要求的是图标颜色和活动文本颜色