Выделите меню Текущий активный ящик в React navigation v5. - PullRequest
Новая
       134

Выделите меню Текущий активный ящик в React navigation v5.

0 голосов
/ 10 марта 2020

Я создал собственный навигатор ящиков, используя версию реагирующей навигации: 5.X, но текущая активная вкладка не выделяется в меню пользовательских ящиков.

  1. Я добавил 'activeTintColor' в DrawerItem элемент, но он не применяется к активному элементу.
  2. Я также добавил activeTintColor в boxContentOptions. Но также не применяется. Есть ли у них какой-либо способ использовать эти общие параметры в пользовательском компоненте ящика?
  3. Я использовал 'icon' в элементе DrawerItem, где я добавил реквизиты по умолчанию (цвет, фокус, размер) согласно документу реагирования навигации , И из-за этого, цвет значков «серый» (может быть поведение по умолчанию). Как я могу изменить значения этого реквизита по умолчанию?
  4. опора по умолчанию 'focus' in 'icon' также не работает. значки не меняются для выбранной вкладки.

Пожалуйста, найдите ниже изображения кода. И дайте мне знать, если я допустил ошибку.

Код навигатора:

enter image description here

Пользовательский компонент выдвижного ящика:

enter image description here

Текущая активная вкладка: Home

enter image description here

Ответы [ 2 ]

1 голос
/ 20 апреля 2020

Вы можете использовать DrawerItemList для отображения Drawer.Screen , определенного в Drawer.Navigator , как показано ниже: -

1) Определите свой Навигатор Ящика: - 

<Drawer.Navigator drawerContentOptions={{ activeBackgroundColor: '#5cbbff', activeTintColor: '#ffffff' }} drawerContent={props => <CustomDrawerContent {...props} />}>
<Drawer.Screen name="Home" component={HomeScreen} options={{
        drawerIcon: config => <Icon
            size={23}
            name={Platform.OS === 'android' ? 'md-list' : 'ios-list'}></Icon>
    }} />

/>

2) В функции CustomDrawerContent: - 

<DrawerContentScrollView {...props} >
----- your custom header ----
<DrawerItemList {...props} />
----- add other custom components, if any ----
</DrawerContentScrollView>

Это решает проблему для меня.

0 голосов
/ 11 марта 2020

@ Vishal Tank добавьте свой стиль в файл js, где ваша функция класса определяется следующим образом: 

class Home extends Component 
{
....
static navigationOptions = 
  {
    labelStyle: {
      fontFamily: 'SomeFont',
      color: 'white',
      fontSize:24,
      paddingLeft:8
    },
    drawerLabel: 'Home',
    drawerIcon: ({tintColor}) =>
    (
      <Icon name="home" paddingLeft={8} color={tintColor} width={30}  size={24} style={{color:tintColor}}/>

    )
  };

........

render()
{
return(
...........
);
};
};

вот ссылка, пример для нее https://reactnavigation.org/docs/drawer-based-navigation/

...