В этом году сообщество React Native претерпело множество изменений. Начиная с принятия сообществом React Hooks, официальной документации, имеющей новый домен, одной из самых популярных библиотек react-navigation, использующих более динамичный и компонентный подход для добавления маршрутов в ваши приложения, и наконец react-native-firebase - пакет для использования Firebase SDK - выпустил шестую версию с некоторыми улучшениями.

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

Цель этого руководства - познакомить вас со всеми последними обновлениями в мире React Native и его библиотеках, таких как react-navigation и react-native-firebase. Если вы хотите добавить новую функцию, не описанную в этом руководстве, смело делайте это и следуйте в своем собственном темпе.

Требования

Убедившись, что у вас есть готовые следующие требования, вы получите подходящую среду разработки для этого проекта:

  • Node.js выше 10.x.x установлен на вашем локальном компьютере
  • Основы JavaScript / ES6
  • сторож установлен файловый наблюдатель
  • react-native-cli установлен через npm или доступ через npx
  • react-navigation
  • Firebase проект
  • react-native-firebase
  • react-native-paper

Полное руководство по настройке среды разработки для React Native можно найти в официальной документации здесь.

Также обратите внимание, что в следующем руководстве будет использоваться React Native версии 0.61.5. Убедитесь, что вы используете версию React Native выше 0.60.x.

Установка библиотек

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

После установки зависимостей обязательно следуйте инструкциям, приведенным в их официальной документации, чтобы настроить собственные двоичные файлы, чтобы они работали с React Native.

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

Пользователям iOS при необходимости обязательно устанавливайте модули через cocoapods.

Создание многоразовых элементов формы

В этом разделе давайте создадим несколько повторно используемых компонентов формы, например FormInput и FormButton. Эти компоненты пользовательского интерфейса будут использоваться на двух экранах: Вход и Регистрация.

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

В корне этого приложения React Native создайте новый каталог с именем src/ и внутри него создайте новый каталог с именем components/.

Внутри этого каталога создайте новый файл с именем FormInput.js. Этот компонент будет предоставлять поле ввода текста для использования компонентами экрана и для ввода пользователем учетных данных.

Начните с импорта следующих операторов:

Dimensions из API ядра React Native предоставляет способ получить ширину и высоту экрана. Вместо того, чтобы указывать фиксированную ширину и высоту для поля ввода текста, мы можем позволить этому API вычислить их за нас. Вы можете получить ширину и высоту экрана приложения, добавив следующий фрагмент:

Затем экспортируйте функцию по умолчанию FormInput, которая будет иметь некоторые свойства:

Опора ...rest должна быть последней опорой, переданной в качестве параметра; в противном случае вы получите сообщение об ошибке. Цель передачи этого свойства - позволить компоненту иметь другие значения свойств.

Наконец, определите соответствующие стили для этого многоразового компонента:

Следующий компонент многократного использования будет в отдельном файле с именем FormButton.js. Он похож на FormInput, за исключением того, что этот компонент будет использоваться для отображения кнопки на экране.

Он также будет использовать ширину и высоту экрана, используя Dimensions из React Native.

Вот полный фрагмент кода:

Библиотека react-native-paper UI имеет три режима отображения кнопки:

  • text: плоская кнопка без фона и контура
  • outlined: кнопка с контуром
  • contained: кнопка с цветом фона и тенью высоты

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

Создайте экран входа в систему

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

Вот демонстрация экрана, которого вы собираетесь достичь в этом разделе.

Внутри src/ создайте еще один каталог с именем screens/. В этом каталоге мы будем хранить все компоненты экрана. Внутри него также создайте LoginScreen.js файл.

Экран входа в систему будет иметь четыре основных элемента пользовательского интерфейса:

  • два поля ввода текста для электронной почты и пароля пользователя
  • одна кнопка входа и одна кнопка для перехода к экрану регистрации (в случае, если конечный пользователь еще не зарегистрирован для использования приложения)

Начните с импорта следующих операторов:

Внутри функционального компонента LoginScreen определите две переменные состояния:

  • email
  • password

Обе эти переменные будут использоваться с компонентом FormInput для получения значения учетных данных пользователя. По умолчанию в качестве значения они будут использовать пустую строку.

Обратите внимание, что каждому из элементов FormInput передаются разные реквизиты. Например, для компонента электронной почты autoCaptialize установлено значение none. Для компонента пароля secureTextEntry задано логическое значение true. Включая других, здесь ...rest становится полезным (как вы видели в предыдущем разделе).

Свойство onChangeText принимает обратный вызов, который вызывается всякий раз, когда изменяется текст поля ввода.

Наконец, вот стили:

Обратите внимание, что вы пока используете объект JavaScript для определения стилей для каждого компонента. StyleSheet в React Native предоставляет API для создания стилей внутри файла компонента. Он принимает объект JavaScript, как и выше, и возвращает из него новый объект StyleSheet. В React Native нет классов или идентификаторов, как в веб-разработке. Чтобы создать новый объект стиля, вы можете использовать метод StyleSheet.create().

Предпочтительно использовать способ определения стилей путем создания объекта. Это не только помогает вам организовать стили и хранить их отдельно, но и эти стили, если они определены таким образом, также отправляются через собственный мост рендеринга только один раз (в отличие от встроенных стилей).

Создайте экран регистрации

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

Создайте новый файл с именем SignupScreen.js внутри каталога src/screens/. Он будет во многом похож на экран входа в систему, который вы создали в предыдущем разделе. Я собираюсь предоставить вам найти сходства и различия между двумя экранами. Взгляните на фрагмент кода для экрана регистрации ниже.

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

Создайте навигатор стека аутентификации

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

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

Создайте новый каталог src/navigation/. Этот каталог будет содержать все маршруты и другие необходимые компоненты для построения навигации нашего приложения.

Внутри этого каталога создайте новый файл с именем AuthStack.js. Этот файл будет иметь навигатор стека.

Начните с импорта следующих операторов, включая оба компонента экрана:

Навигатор стека предоставляет приложению React Native возможность перемещаться между разными экранами, аналогично тому, как работает навигация в веб-браузере. Он толкает или выскакивает экран в состоянии навигации.

Затем создайте экземпляр навигатора стека:

Навигаторы определяются декларативно с использованием версии 5 react-navigation. В нем используется более компонентный подход, аналогичный подходу react-router в веб-разработке с использованием React.js (если вы с ним знакомы).

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

Stack.Navigator принимает те значения опор, которые являются общими для каждого маршрута экрана. Например, как правило, навигатор стека добавляет заголовок к каждому экрану внутри себя. Для текущего стека вам не понадобится заголовок на каждом экране. Таким образом, установка headerMode на значение none выполняет его.

Свойство headerMode определяет, как должен отображаться заголовок для каждого экрана в стеке. Установка его в none указывает, что он не должен отображаться вообще. Остальные значения для этого режима вы можете найти здесь.

initialRouteName - это имя маршрута, отображаемого при первой загрузке навигатора.

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

Чтобы навигация между экранами входа в систему и регистрации работала, вы должны добавить опору navigation к каждому компоненту. Перейдите в файл LoginScreen.js и передайте ссылку на свойство navigation в качестве параметра:

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

Например, в компоненте экрана входа в систему, чтобы перейти к экрану регистрации, добавьте свойство onPress к последнему FormButton. Функция navigation.navigate принимает значение экрана для перехода с текущего экрана:

Точно так же откройте файл экрана SignupScreen.js и передайте ссылку на опору для navigation:

Затем добавьте опору onPress к IconButton.

Действие goBack() закрывает активный экран (экран регистрации) и перемещает обратно в стек (экран входа в систему).

Для получения дополнительной информации о пропе navigation ознакомьтесь с официальной документацией здесь.

Добавить контейнер для навигации

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

Создайте новый файл с именем Routes.js внутри каталогаsrc/navigation/. Этот файл будет содержать все стеки, которые будет иметь приложение, но пока это стек аутентификации.

NavigationContainer - это компонент, который управляет деревом навигации. Это также позволяет компонентам экрана ссылаться на ссылку navigation prop. Это делается путем обертывания всей структуры навигатора.

Упаковка с поставщиком бумаги

Создайте файл с именем index.js в каталоге src/navigation/.

Чтобы компоненты пользовательского интерфейса из react-native-paper работали, вы должны заключить все маршруты в PaperProvider, как показано ниже:

Компонент PaperProvider предоставляет тему всем компонентам фреймворка. Он также действует как портал для компонентов, которые необходимо отобразить на верхнем уровне.

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

Заключение

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

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

Что дальше

В первой части этой серии руководств вы успешно создали поток навигации с помощью react-navigation library, настроили навигатор по стеку и узнали, как использовать предварительно определенные компоненты пользовательского интерфейса из react-navtive-paper для создания повторно используемых компонентов настраиваемых форм.

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

Вот часть 2 для справки 👇



Приложение чата с React Native (часть 2): аутентификация пользователя Firebase с помощью response-native-firebase
Создание потока аутентификации, который работает в нашей структуре навигации heartbeat. comet.ml



Вы можете найти полный исходный код этого проекта в этом репозитории Github.

👉 Вот список ресурсов, используемых в этом руководстве.

💙 Чтобы узнать больше о React Native, ознакомьтесь с этими ресурсами:

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

Независимо от редакции, Heartbeat спонсируется и публикуется Comet, платформой MLOps, которая позволяет специалистам по данным и группам машинного обучения отслеживать, сравнивать, объяснять и оптимизировать свои эксперименты. Мы платим участникам и не продаем рекламу.

Если вы хотите внести свой вклад, отправляйтесь на наш призыв к участникам. Вы также можете подписаться на наши еженедельные информационные бюллетени (Deep Learning Weekly и Comet Newsletter), присоединиться к нам в » «Slack и подписаться на Comet в Twitter и LinkedIn для получения ресурсов, событий и гораздо больше, что поможет вам быстрее и лучше строить лучшие модели машинного обучения.