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

Обе библиотеки с открытым исходным кодом поддерживаются Facebook и сообществом независимых разработчиков. React и React Native были успешно приняты и активно используются рядом корпораций, таких как Airbnb, Buffer, Bleacher Report, Feedly, HelloSign, Imgur и Netflix.

В отличие от других решений кросс-платформенной разработки (например, Cordova, Ionic или Titanium), которые используют веб-представления для графического интерфейса, React Native использует собственные API-интерфейсы рендеринга в Objective-C (iOS) или Java (Android), поэтому ваше приложение отображает с использованием собственных представлений. Это позволяет разработчикам создавать приятные кроссплатформенные интерфейсы без потери качества пользовательского интерфейса.

React Native воплощает в жизнь слоган Java «пиши один раз, работай где угодно», за исключением того факта, что используется JavaScript.

Мы уже некоторое время экспериментируем с React Native; Эти эксперименты привели к ряду интересных компонентов. Однако на этот раз мы решили создать что-то действительно особенное и полезное ...

Шаблонный проект

Чтобы оптимизировать наши процессы разработки и предоставить нашим клиентам высококачественные продукты, мы хотели создать надежное приложение-шаблон, которое бы корректно работало на обеих платформах - Android и iOS - и которое можно было бы использовать в качестве основы для наших будущих проектов. Как вы уже догадались, мы использовали React Native, чтобы воплотить его в жизнь.

Наш проект React Native Template Project содержит пользовательские потоки, общие почти для всех приложений. Эти потоки включают:

  • Авторизоваться
  • Список предметов
  • Детали предмета
  • Выйти

Проект теперь доступен на GitHub, так что вы можете легко его проверить.

Эта статья не является подробным руководством по реализации этих потоков в React Native. Напротив, эта статья раскрывает основы React Native - мы рассмотрим некоторые стандартные шаблоны, а также полезные библиотеки JavaScript, которые можно использовать для создания приложения React Native.

База знаний React Native

  • Компоненты

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

Объект React.Component - это наименьшая элементарная единица графического интерфейса. Компонент принимает параметры (называемые «реквизитами») и возвращает иерархию представления на дисплей с помощью метода визуализации.

Каждый элемент в иерархии - это компонент, который, в свою очередь, принимает свои собственные свойства и содержит другие компоненты.

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

  • Жизненный цикл компонента

У каждого компонента есть жизненный цикл и состояние. Каждый раз, когда они меняются, вызывается метод Render.

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

  • Библиотека Redux

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

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

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

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

  • Библиотека саги

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

Чтобы оптимизировать этот процесс, мы можем использовать промежуточное ПО, посредник между двумя событиями: отправкой действия и получением этого действия редуктором. Фактически, промежуточное ПО на самом деле является функцией, которая принимает store в качестве аргумента, возвращает функцию, которая принимает nextфункцию в качестве аргумента, а затем возвращает другую функцию, которая принимает action в качестве аргумента.

const someMiddleware = store => next => action => { … }

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

Мы выбрали библиотеку Redux-Saga, которая позволяет нам создавать такое промежуточное ПО и предоставляет полезные функции для упрощения работы с Redux.

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

Как мы видим, используя ключевое слово yield (используется в Generators) и некоторые функции из библиотеки Redux-Saga, такие как take, put и call, мы можем перехватывать действия компонентов, отправлять запросы на бэкэнд и делать процесс диспетчеризации действий синхронный и последовательный.

  • Неизменяемая библиотека

Redux использует функции редуктора для выполнения изменений в store, поэтому, когда функция редуктора улавливает какое-либо действие, она создает новый объект, который содержит новое состояние. Почему этот объект должен быть новым? Потому что таким образом мы можем сравнивать ссылки на два разных объекта (новый объект и старый объект); более того, это намного проще, чем сравнивать содержимое объектов.

По крайней мере, мы должны создать новый объект с помощью оператора Spread:

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

  • Элементы пользовательского интерфейса для конкретных платформ

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

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

Чтобы исправить этот недостаток нативных элементов, мы использовали библиотеку Native-Base, которая содержит множество компонентов, специфичных для платформы.

Библиотека Native-Base позволяет нам использовать один компонент для обеих платформ без каких-либо дополнительных настроек.

Мы также можем использовать возможности контейнера Flexbox, который является эффективным и гибким инструментом для размещения элементов пользовательского интерфейса. Это применимо как к стандартным элементам пользовательского интерфейса React Native, так и к элементам, предоставляемым Native-Base.

Что еще умеет наш шаблон?

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

Мы также собрали общие задачи, с которыми мы всегда сталкиваемся, такие как локализация строк, карты, анимация, разрешения, значки, сеть, сохранение данных и т. Д., И также поместили их в наш проект шаблонов.

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

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

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

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

Этот пост изначально был опубликован на сайте Ялантис.