Question

我正在创建我的第一个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
});

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，我建议在drawerIcon中使用navigationOptions属性

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

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

2 个答案: