更改抽屉导航中的活动菜单图标颜色 react-native答案

【问题标题】：change active menu icon color in DrawerNagivation react-native更改抽屉导航中的活动菜单图标颜色 react-native
【发布时间】：2018-08-16 05:12:51
【问题描述】：

我正在创建我的第一个 react-native 应用程序，我想更改抽屉导航的 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
});

【问题讨论】：

标签： react-native react-native-navigation

【解决方案1】：

如果您需要在活动时为所有菜单项使用相同的颜色，这将对您有所帮助，

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

【讨论】：

我认为他要求图标颜色以及活动文本颜色

【解决方案2】：

根据react-navigation-drawer version 2.3.3，我建议在navigationOptions中使用drawerIcon属性

在此示例中，我使用 Ionicons 来自 expo/vector-icons 的图标

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

【讨论】：