React native 更改抽屉中活动菜单图标的颜色

React native 更改抽屉中活动菜单图标的颜色,react-native,react-native-navigation,React Native,React Native Navigation,我正在创建我的第一个react本机应用程序,我想更改抽屉导航的css。我已经尝试使用activeTintColor更改颜色,但它不起作用。我只想更改图标颜色或处于活动状态的菜单项 我所做的是: const DrawerNavigation = createDrawerNavigator({ Page1: { screen: MainTabNavigator, navigationOptions: { drawerLabel: 'Home' },

我正在创建我的第一个react本机应用程序,我想更改抽屉导航的css。我已经尝试使用activeTintColor更改颜色,但它不起作用。我只想更改图标颜色或处于活动状态的菜单项

我所做的是:

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

我想他要求的是图标颜色和活动文本颜色