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

Для iOS вы пишете код с помощью Objective-C или Swift, а для Android вы используете Java или Kotlin. Помимо разных языков программирования, используемых для создания приложения, которое может работать на каждой из двух платформ, наборы инструментов совершенно разные.

Многие современные разработчики используют определенный технический стек для создания веб-приложений: HTML, CSS и JavaScript. Различные фреймворки подпадают под категорию, обычно известную как гибридные фреймворки. Таким образом, вы можете использовать (почти) один набор исходного кода для разработки приложений для платформ iOS и Android.

В последние годы гибридные фреймворки эволюционировали от использования веб-представлений к использованию собственных API-интерфейсов. Кросс-платформенный подход к разработке мобильного приложения имеет свои плюсы и минусы.

Один отличный вариант, который подпадает под кроссплатформенную разработку, - это React Native. Он был разработан и используется Facebook, и многие другие также используют его, включая Tesla, Walmart, Uber Eats, Instagram, Discord, Wix и другие. React Native основан на веб-библиотеке Facebook ReactJS.

О чем этот урок?

Перехватчики React доступны с момента выпуска React версии 16.8.x. В этом руководстве вы получите краткое описание того, как использовать их в приложении React Native.

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

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

Однако они не работают с классами. React предоставляет несколько встроенных хуков, таких как useState и useEffect. Вы также можете создавать свои собственные хуки для повторного использования, чтобы управлять состоянием между различными компонентами.

Оглавление

  • Начиная
  • Точка входа в приложение React Native
  • Настройка навигации по стеку
  • Добавление второго экрана в навигатор стека
  • Добавление компонента "Плавающая кнопка"
  • Добавление настраиваемого компонента заголовка
  • Реализация хуков
  • Добавление компонента FlatList для визуализации заметок
  • Использование параметров навигации для обновления состояния
  • Запуск приложения
  • Заключение

Начиная

Чтобы быстро создать приложение React Native, воспользуемся инструментом под названием Expo. Это управляемый инструментарий разработки, который предоставляет клиенту возможность предварительного просмотра и внесения изменений в приложения React Native с помощью JavaScript. Для начала вам не нужны такие инструменты, как Xcode или Android Studio.

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

Следующим шагом является запуск команды expo init и выбор шаблона по умолчанию: blank.

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

Библиотека react-navigation - это сторонняя библиотека, которую необходимо установить в приложении React Native или Expo отдельно в качестве зависимости. Вы можете использовать npm или yarn, но я буду придерживаться yarn. Каждый шаблон навигации также является зависимостью. Поскольку для этой демонстрации требуется только один шаблон, давайте установим и его.

Третья библиотека, которую вы собираетесь установить, называется react-native-paper, она предоставит набор настраиваемых компонентов пользовательского интерфейса на основе Material Design, которые вы можете интегрировать напрямую. Вернитесь в окно терминала и выполните следующую команду:

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

Это все, что нужно для настройки. Давай что-нибудь построим.

Точка входа в приложение React Native

Файл App.js в сгенерированной структуре приложения - это то, что инициализирует приложение Expo. Другими словами, это отправная точка процесса разработки. По умолчанию он отображает текстовое сообщение и использует для этого функциональный компонент. Откройте файл App.js, и вы получите следующий файл компонента экрана:

Компоненты - это визуальные элементы, которые вы видите на экране в приложении React Native. В приведенном выше фрагменте кода следует искать три основных компонента:

  • View
  • Text
  • StyleSheet

View компонент - это базовый строительный блок в файле компонента React Native. Он сопоставляется с фундаментальными собственными компонентами iOS (UIView) и Android (View), отсюда и его название. Он помещает элемент контейнера, который поддерживает стили макета с помощью flexbox и других стилей, используя объект JavaScript с именем StyleSheet. Следовательно, можно сказать, что View компонентов в основном используются для стилизации и компоновки дочерних элементов.

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

Компонент Text во многом похож на компонент View, за исключением того, что он специально доступен для отображения текста. Также, как и компонент View, он поддерживает стили.

Чтобы увидеть приложение по умолчанию в действии, запустите сервер разработки из окна терминала с expo start. Вы можете протестировать приложение с помощью симулятора или реального устройства (убедитесь, что на нем установлен клиент Expo из магазина приложений).

Настройка навигации по стеку

Библиотека react-navigation-stack предоставляет встроенную функцию, которая возвращает компонент React. Эта функция createStackNavigator принимает объект конфигурации маршрута и объект параметров (который является необязательным).

Библиотека react-navigation предоставляет функцию createAppContainer, которая также возвращает компонент React. Он принимает в качестве параметра компонент React, созданный createStackNavigator, и напрямую экспортируется в App.js для использования в качестве корневого компонента нашего приложения.

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

Затем создайте новый файл с именем index.js внутри src/navigation/ со следующим фрагментом кода:

В приведенном выше фрагменте кода такие параметры, как initialRouteName и headerMode, передаются как необязательные свойства объекта. Первый объект содержит конфигурацию маршрута.

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

Убедитесь, что сервер разработки запущен. В клиенте Expo вы получите следующий результат.

Добавление второго экрана в навигатор стека

Чтобы завершить процесс навигации, давайте настроим другой экран с фиктивным текстом для отображения. Внутри src/screens/ создайте еще один файл с именем AddNotes.js и добавьте следующий фрагмент кода:

Откройте файл navigation/index.js и измените навигатор стека:

Обратите внимание, что в объекте options вы можете указать свойство mode для навигатора стека. Значение этого свойства используется для определения конкретного способа визуализации стилей и переходов. Значение этого свойства по умолчанию - card для экранных переходов в iOS и Android. В приведенном выше фрагменте добавьте свойство со значением modal.

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

Добавление компонента "Плавающая кнопка"

react-native-paper также предоставляет кроссплатформенные компоненты для добавления в приложение. В этом разделе давайте добавим плавающую кнопку на ViewNotes экран, которую можно использовать для перехода к AddNotes экрану. Импортируйте компонент из библиотеки UI:

Затем измените функцию возврата и компонент FAB, а также соответствующие стили, чтобы расположить его внизу экрана.

В клиенте Expo вы получите следующий результат:

Кроме того, если вы нажмете кнопку FAB, вы перейдете к экрану AddNotes:

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

Добавление настраиваемого компонента заголовка

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

Импортируйте следующие компоненты из react-native и react-native-paper:

Appbar - это компонент, который отображает элементы на панели. С каждым из элементов может быть связано действие, но для демонстрационного приложения оно нужно только для отображения заголовка. Добавьте следующий фрагмент кода, который состоит из компонента, а также соответствующих стилей. Компонент Header будет принимать одну опору titleText, которая является заголовком определенного экрана.

Импортируйте этот компонент в ViewNotes.js и измените содержимое файла компонента, чтобы отобразить заголовок.

На выходе будет следующее:

Аналогичным образом измените файл AddNotes.js:

Вот результат:

Реализация хуков

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

Откройте файл ViewNotes.js и начните с импорта useState из библиотеки React:

Давайте создадим массив для хранения и отображения всех заметок. Используя массив позже в качестве значения для компонента FlatList, вы можете легко визуализировать каждую заметку. В функциональном компоненте вы можете определить переменную состояния по умолчанию, как показано ниже:

React сохраняет состояние между всеми происходящими повторными рендерингами. Хук useState возвращает пару значений. В приведенном выше фрагменте первый - notes, который содержит текущее значение пустого массива (по умолчанию), а второй, setNotes, - это функция, которая позволяет вам обновлять текущее значение, или в В нашем случае добавляем элементы в массив.

Чтобы добавить элементы в массив, давайте создадим вспомогательный метод с именем addNotes.

Добавление компонента FlatList для визуализации заметок

Когда массив notes пуст, мы можем отобразить текстовое сообщение, указывающее, что в списке нет элемента; в противном случае мы можем визуализировать FlatList компонент. Для этого вам нужно сначала импортировать сам компонент.

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

Затем измените JSX компонента ViewNotes. Обратите внимание, что при переходе к экрану AddNotes вы должны передать его как опору. Это можно сделать, передав его в качестве второго параметра функции navigation.navigate.

Из приведенного выше фрагмента обратите внимание, что есть три основных свойства, которые необходимы компоненту FlatList для отображения списка данных:

  • data: массив данных, используемый для создания списка. Как правило, этот массив состоит из нескольких объектов.
  • renderItem: функция, которая берет отдельный элемент из массива данных и отображает его в пользовательском интерфейсе.
  • keyExtractor: указывает списку данных использовать уникальные идентификаторы или ID для отдельного элемента.

Также добавьте listTitle внутри объекта StyleSheet:

Использование параметров навигации для обновления состояния

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

Используя Hook useState, компонент будет хранить значение заголовка каждой заметки и ее описания как noteTitle и noteValue соответственно.

Компонент IconButton из react-native-paper будет использоваться для закрытия модального окна. После этого добавьте два поля ввода, используя TextInput, которые будут принимать пользовательское значение для заголовка заметки и ее описания.

Наконец, используя компонент FAB, пользователь может отправить форму. Этот компонент будет временно отключен, если для заметки не указано название. Это можно сделать, используя опору disabled.

При нажатии на эту кнопку компонент, использующий navigation props, будет выполнять два действия одновременно. Он сохранит заголовок и описание заметки, а также выполнит действие для возврата к экрану ViewNotes.

Вот полный AddNotes фрагмент кода вместе с соответствующими стилями.

А вот результат, который вы получите при переходе к экрану AddNotes:

Запуск приложения

Демонстрационное приложение готово к тестированию. На изображении клиента Expo ниже вы можете найти демонстрацию для добавления заметки и ее рендеринга:

Заключение

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

То, как поддерживается Expo, с добавленной поддержкой веб-приложений и универсальных приложений, станет важной частью пути.

Вы можете ознакомиться со следующей публикацией этой серии, посвященной реализации React Hooks с библиотекой управления состоянием Redux, здесь:



Использование Redux с React Hooks в приложении React Native
Работа с типами действий и создателями, редукторами и т. Д. heartbeat.comet.ml



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

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

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

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