изменить цвет значка активного меню в DrawerNagivation

Я создаю свое первое приложение, основанное на реакции, и я хотел изменить 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
person Mahi Parmar    schedule 16.08.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Если вам нужно использовать один и тот же цвет для всех элементов меню, когда они активны, это поможет вам,

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)'
  }
});
person Dinith Minura    schedule 16.08.2018
comment
Я думаю, что он попросил цвет значка вместе с активным цветом текста - person Zaheer; 04.02.2020

arrow_upward
0
arrow_downward

Согласно 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)'
        }
      },
....
....
....
person Zaheer    schedule 04.02.2020