在 DrawerNagivation react-native 中更改活动菜单图标颜色

Question

我正在创建我的第一个 react-native 应用程序，我想为抽屉更改 css navigation.i 已经尝试使用 activeTintColor 更改颜色但它不是 working.I 只是想更改图标颜色或处于活动状态的菜单项。

我在这里做了什么：

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

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

Answer 2

根据react-navigation-drawer version 2.3.3，我建议在navigationOptions

中使用drawerIcon属性

在此示例中，我使用 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)'
        }
      },
....
....
....

在 DrawerNagivation react-native 中更改活动菜单图标颜色

change active menu icon color in DrawerNagivation react-native

react-native

react-native-navigation