Основным компонентом любого приложения является навигация между разными маршрутами / экранами / сценами. Раньше я анализировал различные решения для навигации, но на этой неделе я хотел потратить некоторое время на выполнение общих задач маршрутизации, используя пакет, который я часто использовал в последнее время, react-native-router-flux .

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

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

Давай перейдем к делу ...

Настраивать

Первым делом мы настроим наш собственный проект react, а затем установим пакет react-native-router-flux.

react-native init ReactNativeRouterFluxDemo
cd ReactNativeRouterFluxDemo
npm install --save react-native-router-flux

Затем мы настроим наш проект, чтобы мы могли легко писать для iOS и Android.

mkdir app

Затем создайте нашу точку входа в app / index.js

Наконец, мы хотим указать как index.ios.js, так и index.android.js на нашу новую кроссплатформенную точку входа. Замените оба файла следующими

Прохладный! Скучная настройка. Вот что вы должны увидеть.

Переход между сценами

Итак, теперь у нас есть стандартное приложение React Native. Но мы хотим иметь два экрана. Алый экран и серый экран. Сначала создадим ScarletScreen.js и GrayScreen.js. Я собираюсь опубликовать фрагмент только для одного, единственное отличие - это текст, имя компонента и backgroundColor. Проверьте полное репо, если вы застряли.

Итак, у нас есть эти два экрана, как нам их отобразить? Вот тут-то и пригодится react-native-router-flux. Для этого вам нужно сделать немного шаблона, и я все объясню после того, как вы взглянете на фрагмент кода. В app / index.js происходит следующее:

Здесь мы делаем несколько вещей, прежде всего требуя необходимых компонентов. После этого вы увидите компонент Router, который мы хотим вернуть. Затем у нас есть первая Scene, которая представляет собой номенклатуру, используемую в пакете. Все остальные сцены принято заключать в корневую сцену.

Затем вы можете увидеть фактические сцены, которые мы используем для отображения наших компонентов. У них есть минимальный набор свойств для рендеринга, а именно: ключ (вы увидите, как мы его используем через мгновение), компонент и заголовок (который используется на панели навигации). .

Так как же нам перемещаться между сценами?

Мы будем полагаться на экспорт Actions из react-native-router-flux. Каждый раз, когда мы хотим перейти на новый экран, мы вызываем Actions. [KEY], где [KEY] - это ключ, который мы передали в сцену, когда мы ее определили. . Посмотрим, как это работает.

Вы можете увидеть, как мы используем Действия в строке 16. Теперь вы можете немного перемещаться!

Таким образом, с помощью всего нескольких строк кода мы можем перемещаться между двумя экранами, на iOS или Android, и мы получили панель навигации бесплатно. Если вам нужна дополнительная информация, посмотрите мини-руководство в документации по react-native-router-flux.

Вкладки

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

Создайте следующие файлы со следующими цветами фона (извиняюсь за цвета, я выбрал тему).

Сюда добавлено довольно много файлов, так что проверьте этот коммит, чтобы увидеть все изменения, включенные здесь. Вот папка app / после дополнений.

.
├── BlackScreen.js
├── BlueScreen.js
├── GoldScreen.js
├── GrayScreen.js
├── MaizeScreen.js
├── ScarletScreen.js
└── index.js

Итак, мы настроили все наши экраны. Теперь мы можем создать панель вкладок.

Настроить вкладки очень просто - все, что вам нужно сделать, это добавить опцию tabs к свойству сцены. Затем он превратит каждого ребенка в отдельную вкладку. Каждая вкладка будет иметь свою собственную панель навигации и иметь собственное состояние навигации. Мы увидим это чуть позже, сначала давайте напишем код.

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

Здесь мы видим, что мы взяли наши исходные сцены и вложили их в сцену вкладки. Мы также настроили базовый компонент для обработки значков вкладок (или, в нашем случае, текста вкладок). В полном файле есть другие вкладки, но я призываю вас добавить их, чтобы вы могли испытать настройку вкладок, а затем ссылаться на код.

Вот что у нас есть сейчас.

Модальный

Прохладный! Итак, у нас есть 3 вкладки, и каждая вкладка содержит по 2 сцены, вложенные в нее. Но что, если мы хотим, чтобы модальное окно появлялось поверх всех этих элементов, скрывая панель вкладок и панель навигации? На самом деле это не модальная, а еще одна сцена, которую мы добавляем. В пакете есть модальные окна другого типа, которые вы можете использовать при желании. Вот какова будет наша цель.

Как вы можете (надеюсь) увидеть, когда мы нажимаем «Open Modal», экран всплывает поверх всего остального и делает это путем анимации снизу. Это просто, как и реализация. Первое, что мне нужно было сделать, это создать компонент ModalScreen, который ничем не отличается от всех остальных. Затем в app / index.js я добавил следующие

Как видите, это абсолютный минимум. Полные обновления можно увидеть в этом коммите. Мы указываем те же свойства, что и все остальные сцены (ключ, компонент и заголовок), единственным дополнением является direction, которое позволяет нам поднять экран снизу и hideNavBar , который скрывает навигационную панель - хорошее название со стороны автора пакета :)

Это краткое введение в использование пакета react-native-router-flux - он, вероятно, удовлетворит многие ваши потребности в навигации. Использовать хорошо поддерживаемый, пользующийся успехом пакет, созданный на основе NavigationExperimental, будет намного проще, чем если бы вы попытались создать свой собственный. Если вы хотите глубже погрузиться в то, что вы можете делать с этим пакетом, обязательно ознакомьтесь с официальной документацией.

Вам это помогло? Если вы хотите узнать больше о React Native, ознакомьтесь с моим бесплатным видеокурсом », где мы шаг за шагом создаем приложение.