Как создать вложенное меню ящика с помощью React Native

1656630972 kak sozdat vlozhennoe menyu yashhika s pomoshhyu react native

от Дхрувдутта Джадхова

1*rts2oeflx0NgkJ5wdhBUhg

Экранное пространство на мобильном устройстве является ценным товаром. The меню ящика (или «гамбургерное меню») — один из самых популярных шаблонов навигации, который помогает сохранить его, предлагая интуитивно понятную навигацию. В этой публикации я расскажу о том, как создать вложенное (многоуровневое) меню ящика с помощью React Native и React Navigation. ?

1*YYYyBYo_SjxfgVnIsZyKUQ
Вложенные ящики в React Native

Попробуйте живую демонстрацию мобильный?или в Интернете. ?

Навигация является основой большинства приложений, созданных для производства. Внешний вид навигации важен для стимулирования использования и взаимодействия с мобильными приложениями.

Однако, если вы разработчик React Native, у вас нет однозначного мнения по созданию навигационного меню. React Native рекомендует ряд библиотек навигации. Каждый имеет свою силу в зависимости от ваших потребностей, но нет одного явного победителя для всех вариантов использования.

Ни одна из библиотек навигации пока не поддерживает встроенные ящики. Но одной из библиотек, предоставляющей богатый API для создания специальных решений, является React Navigation — навигация на основе JavaScript. Его сильно поддерживает и поддерживает сообщество React Native. Это то, что мы собираемся использовать в этом учебнике.

Вариант использования ?️

Мне пришлось создать приложение для игровой площадки, чтобы продемонстрировать библиотеку компонентов пользовательского интерфейса для React Native. Он состоит из восьми различных компонентов, каждый из которых поддерживает разные реквизиты, и более 50 различных опций.

Невозможно одновременно показать все параметры внутри ящика без многоуровневого ящика, охватывающего параметры на основе выбранного компонента. Я не мог найти готового решения для этого, поэтому мне нужно было создать собственное.

Настройка базы?

Для базовой настройки я предполагаю, что у вас уже есть настройки проекта React Native с CRNA, Expo Kit или React Native CLI. Убедитесь, что у вас установлена ​​библиотека React-navigation с yarn или npm. Мы начнем сразу с использования API навигации.

Не стесняйтесь просмотреть руководство по началу работы, прежде чем продолжить, если вы не знакомы с React Navigation API.

Мы начнем с примера, похожего на то, что задокументировано в официальном руководстве DrawerNavigator от React Navigation. Мы создадим простой ящик с двумя элементами ящика: Дом и Уведомление.

1*48Gg3UOqNIKZpDGDlJ9tFQ
Настройка базы

Специальное содержимое ящика

React Navigation позволяет всем навигаторам производить много настроек, передавая конфигурацию навигатора как второй параметр. Мы будем использовать его для воспроизведения некоторого настраиваемого содержимого, кроме элементов ящика запасов.

DrawerNavigator(RouteConfigs, DrawerNavigatorConfig)

Мы пройдем реквизит, который называется contentComponent конфигурации, которая позволит нам воспроизводить собственное содержимое для ящика. Мы используем это, чтобы показать верхний и нижний колонтитулы вместе с преобладающим DrawerItems от react-navigation.

1*wz9NtNNwoXfw5mv7fv2EmQ
DrawerNavigator: компонент содержимого

Это потенциально разблокирует многие вещи, которые можно сделать, управляя тем, что отображать внутри ящика.

Создание отображения экрана

Нам нужно создать вложенный ящик для каждого компонента, который мы хотим показать. Итак, давайте сначала зарегистрируем все экраны с помощью конфигурации DrawerNavigator. Мы создали отдельный файл отображения экрана для компонентов. Вы вполне можете иметь свою конвенцию или определить объект, похожий на компонент главного экрана.

Отображение экрана состоит из простых объектов со свойством экрана. The screenMapping объект выглядит примерно так:

После регистрации всех компонентов ящик будет выглядеть примерно так:

1*Rh-POAkjqZBruVHAdejFlw
Регистрация всех компонентов вместе с дочерними параметрами

Это воспроизведет все компоненты вместе с их параметрами. У нас есть два основных компонента: DataSearch и TextField. У каждого есть такие параметры, как «С положением значка», «С заполнителем» и т.д. Наша задача состоит в том, чтобы разделить их в список только компонентов (DataSearch, TextField).

Группировка наружного ящика

Шаблон, который я придерживался при отображении, заключался в использовании разделителя _ чтобы сгруппировать варианты из одного компонента. Например, навигационные клавиши, которые я использовал, были DataSearch_Basic и DataSearch_With Icon Position. Это именно то, что поможет нам объединить параметры одного компонента, такого как DataSearch. Мы однозначно оценим все компоненты, которые нам нужно показать для наружного ящика.

Мы создадим util для оценки элементов внешнего списка ящиков для рендеринга.

Эта функция вернет объект с уникальными компонентами для основных компонентов, таких как (DataSearch, TextField), которые мы отобразим на экране с помощью contentComponent специальный компонент. Мы также будем поддерживать a логическое значение чтобы определить содержимое, отображаемое на ящике в определенный момент.

The renderMainDrawerComponent это только функция, повторяющая ключи объекта-компонента. Он просто воспроизводит пользовательские элементы внешнего ящика, построенные поверх Text и View от react-native. Проверьте полный код здесь.

Это отразит ящик так:

1*NeMPqRQBQJr4JChGL2SMmQ
Показаны только предметы ящика внешних компонентов

Визуализация дочернего ящика?

Теперь нам нужно показать параметры на основе затрагиваемого компонента. Вы могли заметить, что в утилитах мы также извлекаем исходный и конечный индексы групп компонентов на основе шаблона разделителя.

Например, экраны DataSearch начинаются с индекса 1 (индекс 0 – главный экран) и заканчиваются на 3. TextField начинается с 3 и заканчивается на 5. Мы используем эти индексы, чтобы волшебным образом разделить items передаваемые DrawerItems на основе выбранного компонента и его показателей.

Теперь, после нажатия на DataSearch, ящик отобразится примерно так:

1*WdWUmlaxr-NUQaOr5C7UIA
Дочерние компоненты для выбранного компонента

Мы также добавили приятную кнопку «Назад», фактически переключающую логическое значение для рендеринга элементов основного ящика. Вы можете проверить полный код здесь.

Теперь единственное, что осталось сделать, это сделать элементы ящика более чистыми, обрезав лишнее название компонента. Опять же, здесь пригодится расширенный React Navigation API.

Существуют разные свойства, которые мы можем использовать navigationOptions. В частности, мы собираемся использовать здесь title реквизит с отображением экрана. Это позволит нам удалить часть перед первым разделителем. Таким образом, DataSearch_Basic будет отображаться только как Basic.

1*k9mp_b8adb_a6WJlVwx63Q
Предметы детского ящика

Это все. Мы можем добавить сколь угодно элементов на основе шаблона разделителя. Приложение для игровой площадки, которое мы создали, состоит из восьми основных компонентов и более 53 опций.

1*7cawloWms3S3_t23c03L4g

Вот ссылка на окончательное приложение и кодовую базу.

Резюме ?

  • Настройка базы: DrawerNavigation привет мир из документов.
  • Специальное содержимое ящика: визуализация элементов ящика с помощью contentComponent.
  • Отображение экрана: Определение и регистрация всех компонентов ящиков.
  • Групповой внешний ящик: чтение разделительного шаблона для группировки элементов ящика.
  • Визуализация дочернего ящика: разделение и отображение элементов дочернего ящика.

Вывод?

Мы научились создавать многоуровневое меню ящика с помощью React Native. Мы использовали React Navigation API для рендеринга пользовательского компонента содержимого в ящике и использовали шаблон разделителя для отображения экрана. Используйте этот шаблон для создания уровня вложенности или условного рендеринга для ящиков.

ReactiveSearch ?

Предоставляет компоненты пользовательского интерфейса для родной и веб-платформы для создания идеального поиска. Вы можете проверить все компоненты, которые он предлагает, поиграв с программой игровой площадки или создав собственный компонент.

appbaseio/reactivesearch
reactivesearch — библиотека компонентов React и React Native UI для создания приложений, управляемых даннымиgithub.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *