Рубрики
Без рубрики

Управление состоянием в приложении навигации на навигацию с redux

Andrea Bizzotto Управляющее государство в приложении React Navigation с кредитом ReduxImage: Petar Petkovskiin в этом уроке я покажу, как управлять состоянием навигации и приложения, создавая простое приложение с навигацией по реагированию и Redux. Пререквизит: Вы уже должны быть знакомы с реактивными натуральными, реагировать навигацию и redux.

Андреа Бизвотто

В этом руководстве я покажу, как управлять навигация и Состояние приложения Строив простое приложение с Реагировать навигацию и Redux Отказ

Пререквизит : Вы уже должны быть знакомы с реактивными натуральными, реагировать навигацию и redux. Если вы просто начинаете с реагирования родных, я настоятельно рекомендую этот курс:

Обзор приложений

Мы собираемся построить приложение из двух страниц:

  • Главная страница : Это показывает вид контейнера с определенным цветом фона и кнопкой. Когда кнопка нажата, вторая страница представлена.
  • Выберите цвет страницы : Это показывает красные, зеленые и синие кнопки. Когда выбран цвет, приложение возвращается на главную страницу и показывает обновленный цвет фона.

Создавая это приложение, вы узнаете:

  • Как навигаться между различными экранами с Реагировать навигацию
  • Как использовать редукторы и действия для обновления состояния приложения, Так что Действия на одном экранном дисковод

С этим знанием вы сможете построить более сложные приложения.

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

Настройка проекта (EXPO)

Мы собираемся построить это приложение с Экспо XDE Отказ

Вы можете скачать EXPO для вашей ОС из Страница EXPO XDE GitHub Отказ

Затем отправляйтесь на Инструкции по установке на выставки. Они покажут вам, как установить XDE на рабочем столе и запустить приложения в EXPO на симуляторе/устройстве.

Как мы будем запустить приложение на симуляторе, вам также нужно будет скачать Xcode или Android Studio Отказ

После запуска EXPO эта страница представлена:

  • Выберите «Создать новый проект …»
  • Выберите пустой шаблон и назовите проект Redux-навигация

Проект будет создан, то начнется нативное Packager RACT.

Чтобы запустить приложение в симуляторе, выберите Устройство -> открыть в симуляторе iOS.

Как только симулятор загружен, появляется следующий экран:

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

Создание приложения

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

Откройте терминал, перейдите к папке проекта, которую вы создали в EXPO, и введите:

npm install --save react-navigation redux react-reduxnpm install

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

Время построить наше приложение. Я организовал свои папки проекта, как это:

/src  /actions    ColorChangedAction.js  /components    AppNavigator.js    ChooseColorPage.js    MainPage.js  /reducers    AppReducer.js    ColorReducer.js    NavReducer.js  /state    Colors.js

Вы можете реплицировать эту же структуру из вашего терминала:

cd redux-navigationmkdir src && cd srcmkdir actions && cd actions && touch ColorChangedAction.js && cd ..mkdir components && cd components && touch AppNavigator.js ChooseColorPage.js MainPage.js && cd ..mkdir reducers && cd reducers && touch AppReducer.js ColorReducer.js NavReducer.js && cd ..mkdir state && cd state && touch Colors.js && cd ..

Скопируйте следующий код в Colors.js файл:

Далее создайте Главная страница с цветным фоном по умолчанию и кнопку:

Несколько примечаний:

  • Главная страница это реактивный компонент, а не Функциональный компонент без гражданства , потому что ему нужно будет получить доступ к заявлению
  • Я использую Flex: 1, выравнивайте: «Растянуть» Чтобы сделать вид контейнера простираться на весь экран
  • Цвет вида контейнера определен в ВыбратьColor () Способ, какие образцы Красный от нашего Цвета стол и возвращает соответствующий шестигранный код
  • Я добавил пустую Onchoosecolor () Обработчик для кнопки Press Event. Мы добавим тело этого метода позже.

Время подключить наш Главная страница в наш корню App.js файл. Замените старое содержание с этим:

Освежающий симулятор дает это:

Не красивая, но он показывает цвет фона и наша кнопка как предназначенная.

Вот снимка того, что мы построим до сих пор: Код GitHub Snapshot 1 Отказ

Добавление навигации

Теперь мы готовы добавить некоторую навигацию в наше приложение.

Сделать это, откройте Appnavigator.js Файл и добавьте эти содержимое:

Этот код заимствован из Пример Redux в Реагистрационная навигация проект.

Определяет Stacknavigator , используя наш Главная страница как его главный экран.

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

Время для записи навигационного редуктора, которое удержит состояние навигации внутри магазина Redux. Открыть Navreducer.js Файл и добавьте следующее:

Этот редуктор определяет начальное состояние навигации нашего приложения. Опять же, котел код.

Теперь, давайте откроем Appretucer.js Файл и добавьте это:

Как растет наше приложение, нам могут понадобиться другие редукторы рядом с нашими Navreducter Отказ Таким образом, мы можем объединить их все вместе внутри Учредитель Отказ

Наконец, мы можем обновить наше App.js Чтобы использовать все эти новые вкусности:

Способ Render возвращает провайдер с созданным магазином Redux и удерживает наш компонент верхнего уровня. Опять же, это просто код BoverPlate, необходимый для того, чтобы крюкнуть с помощью redux.

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

Ведь этот код вы можете получить некоторые ошибки на вашем симуляторе, если что-то отсутствует. Если это так, используйте этот снимок кода, чтобы вернуться на трек: Код GitHub Snapshot 2 Отказ

Показать выберите цветную страницу

Теперь, когда у нас есть Главная страница внутри Stacknavigator Мы готовы добавить ChoosecolorPage. Таким образом, мы можем перейти к нему.

Открыть Choosecolorpage.js Файл и добавьте следующий код:

Несколько примечаний:

  • Код в Визуализация () Способ передавать каждый цвет и отображает его в Кнопка Отказ Название и цвет Свойства устанавливаются.
  • Когда кнопка постучала, OnSelectColor () Обработчик называется с соответствующим цветовым ключом.
  • навигация Объект доступен через реквизит Отказ На самом деле, он вводится во все экраны в нашем Аппагигатор Отказ
  • Призыв this.proops.navigate.goback () возвращает нас на предыдущий экран в Аппагигатор Отказ
  • На этом этапе Colorname еще не используется для установки любого состояния.

Далее мы должны сделать наши Аппагигатор знать о новом ChoosecolorPage экран. Давайте обновим его в Appnavigator.js файл:

Наконец, добавьте код, чтобы перейти к ChoosecolorPage Когда Выберите цвет Кнопка постучала на Главная страница Отказ

Если мы обновляем симулятор сейчас и нажмите на Выберите цвет , приложение навигациирует на новый экран, который показывает три кнопки:

Примечание: Призыв Навигация. Вавигация («Чусеколор») работает, потому что мы назвали Choosecolor. Как одна из маршрутов в нашем Аппагигатор Отказ

Нажатие на кнопку «Назад» или на любом из цветных кнопок возвращает нас на главную страницу, но цвет фона не изменяется в соответствии с нашим выбором.

Давайте исправить это в следующем разделе.

Опять же, если что-то не работает, вы можете получить мой спасенный снимкость кода к этому вопросу: Код GitHub Snapshot 3 Отказ

Управляющее состояние приложения

Мы будем использовать Redux, чтобы установить цвет фона нашего Главная страница как наше состояние приложения.

Для этого нам нужно определить изменение цвета, а также редуктор цвета.

Открыть ColorChangedAction.js Файл и добавьте следующее:

Тогда откройте Colorreducer.js Добавить Добавить:

Для того, чтобы этот редуктор, который будет использоваться, нам нужно добавить его в Appreducer.js. вот так:

Теперь мы готовы называть наше ColorChanged действие Когда пользователь выбирает цвет в ChoosecolorPage Отказ Это обновленное Choosecolorpage.js файл:

Обратите внимание, что мы сделали три изменения:

  • Импортировал ColorChanged действие на вершине
  • Подключил его с Подключиться () и mapstatetopops.
  • Использовал это внутри OnSelectColor (Colorname)

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

Это потому, что мы не сказали Главная страница использовать новое состояние.

Легко исправить. Открыть Mainpage.js и добавьте необходимый код:

Несколько примечаний:

  • MapStatetoPOOPs теперь устанавливает Colorname из государства в Colorreducer
  • Это затем доступно через реквизит объект и может быть использован внутри ВыбратьColor ()
  • Не забудьте Импорт {Connect} из «React-redux»; наверху

Если мы попробуем приложение снова в симуляторе, теперь мы можем изменить цвет фона. ?

Обновленный снимок: Код GitHub Snapshot 4 Отказ

Бонус: Представление страницы выбора цвета модально

Когда мы нажмем Выберите цвет Кнопка в Главная страница , ChoosecolorPage скользит справа. Это анимация навигации по умолчанию внутри Stacknavigator Отказ

Что если мы хотели представить ChoosecolorPage модально вместо?

Это легко делается путем изменения конфигурации нашего Аппагигатор вот так:

Обратите внимание на добавление навигация с Headerleft: NULL Собственность внутри Choosecolor и Режим: «Модаль» параметр.

Если мы попробуем это на симуляторе, ChoosecolorPage Теперь скользит снизу.

Реагниавтоматическое навигация очень настраивается. Я рекомендую проводить некоторое время прочитать документацию Для проекта , чтобы узнать все то, что вы можете сделать с этим.

Заворачивать

Мы узнали, как:

  • Настройка и использование EXPO для запуска мобильного приложения на симуляторе
  • Создайте приложение с двумя разными страницами и навигация между ними с помощью навигации RACT
  • Используйте действия и редукторы, чтобы изменить состояние с экрана и использовать его для обновления UI на другом

Вы можете найти полный исходный код На Github здесь Отказ

Я также поделился проектом публично На Экспо здесь Отказ

Я надеюсь, что вам понравилось это руководство. Хороший следующий шаг отсюда – смотреть на официальный Примеры навигации на навигацию , а также другой Учебники от общины Отказ

Комментарии и отзывы ценятся. ?

И если вы ?? ? Я могу даже сделать пошаговый видеоурок. ?

Обо мне: Я независимый разработчик IOS, жонглирую между контрактной работой, открытым исходным кодом, боковыми проектами и блогов.

Я @ Biz84 в Твиттере. Вы также можете увидеть мой Github страница. Обратная связь, твиты, забавные GIFS, все добро пожаловать! Мой любимый? Много ???. Ох, и шоколадное печенье.

Оригинал: “https://www.freecodecamp.org/news/managing-state-in-a-react-navigation-app-with-redux-6d0b680fb595/”

Читайте ещё по теме: