Руководство по React Native для начинающих Android-разработчиков (с примером приложения)
Представляем вам перевод статьи Nikhil Sachdeva, опубликованной на hackernoon.com. Автор делится опытом разработки мобильных приложений с помощью React Native и предлагает создать свое приложение, используя этот фреймворк.
Я был Android-разработчиком и довольно длительное время использовал в работе Java. Лишь недавно я попробовал свои силы в создании мобильных приложений с помощью React Native. Это заставило меня взглянуть на процесс разработки по-новому, если не сказать больше. Цель моей статьи — показать, какие различия я заметил, используя эти два фреймворка в разработке приложений.
Что такое React Native
«React Native позволяет создавать мобильные приложения, используя при этом только JavaScript с такой же структурой, что и у React. Это дает возможность составлять многофункциональный мобильный UI с применением декларативных компонентов».
«Приложения, которые вы создаете с помощью React Native, не являются мобильными веб-приложениями, потому что React Native использует те же компоненты, что и обычные приложения для iOS и Android. Вместо того чтобы использовать язык Swift, Kotlin или Java, вы собираете эти компоненты с помощью JavaScript и React».
Итак, получается, что React Native — это фреймворк, в основе которого лежит React.js, что позволяет разрабатывать кроссплатформенные приложения как для Android, так и для iOS.
Вы спросите, зачем уходить от привычного Java и осваивать JavaScript и React.js? Вот несколько плюсов использования этих языков.
Плюсы: в чем вы выиграете
1. Кроссплатформенная разработка
Основная цель разработчиков — предоставить клиентам сервисы. Никто не хотел бы, чтобы его пользователи были ограничены лишь одной какой-то платформой только потому, что разработчик не может создавать приложения для других платформ. Следовательно, и сам разработчик не должен ограничивать свои способности только потому, что ему или ей комфортно работать с конкретным инструментом разработки.
Фреймворк React Native является портативным, то есть его единая кодовая база, написанная в JavaScript, создаст модули как для Android, так и для iOS.
2. Освоение React
Освоив React Native и JavaScript, вы откроете для себя новый мир front-end разработки применительно, например, к веб-сайтам. Фреймворк React Native основан на тех же компонентах, что и React, поэтому полученные здесь навыки не ограничиваются только разработкой мобильных приложений.
3. Время сборки быстрее, чем в Android Studio
Вы когда-нибудь тратили больше 2–3 минут на сборку, чтобы протестировать/пофиксить базовую функцию, и при этом багфикс растягивался на долгие часы? Решением проблемы станет React Native. С ним на сборку уходит значительно меньше времени. С такой функцией, как «Горячая перезагрузка» (Hot Reloading), разработка и тестирование пользовательского интерфейса — это легко. Благодаря этой функции приложение перезагружается каждый раз, когда JS-файл сохраняется!
4. JavaScript удобен для передачи данных по сети
В React Native вызов API, рендеринг изображений по URL и другие процессы очень просты. Больше не нужно использовать Retrofit, OkHttp, Picasso и т. д. Намного меньше времени тратится на настройку. Когда данные поступают из API на платформе Android, они сначала преобразуются в POJO-модель и лишь затем используются в элементах UI. А вот данные JSON, полученные в React Native, удобны для JavaScript и могут напрямую использоваться для предпросмотра UI. Это позволяет облегчить веб-интерфейс для GET или POST-запросов от REST API.
5. Разработка UI
В React Native в качестве разметки UI выступает модуль flexbox, серьезный конкурент XML-разметки на Android. Flexbox очень популярен в сообществе веб-разработчиков. В React Native UI-элементы в основном должны разрабатываться с нуля, тогда как в нативной разработке для Android библиотека поддержки Google Design Support Library уже подключена. Это дает разработчику свободу в плане интерактивного и адаптивного дизайна.
Минусы: в чем вы, быть может, проиграете
1. Возможно, вы ненавидите JavaScript
Многие люди не любят JavaScript просто за то, что этот язык не похож на традиционные языки, такие как Java, C++ и другие. Подробные негативные отзывы вы можете найти здесь и здесь.
2. Не так уж много сторонних библиотек
Сообщество React Native по-прежнему находится в стадии становления и поддерживает сторонние библиотеки, не такие популярные, как нативная библиотека Android (кстати, оцените слайд-шоу моей библиотеки для Android ).
Пример приложения
Для начала давайте попробуем разработать приложение для извлечения данных из API, чтобы понять, насколько просто работает React Native. Очевидно, что первым шагом является установка React Native. Для этого перейдите на официальный сайт. Также вы найдете там замечательную инструкцию для начинающих — прочтите ее. Мы будем использовать фиктивный API https://jsonplaceholder.typicode.com/photos, который содержит следующие данные:
Обратите внимание, что для Android работа с API с использованием таких библиотек, как Retrofit/OkHttp, — это сложная задача. Однако мы видим, что динамический и итеративный язык JavaScript упрощает эту работу.
Перейдем к созданию проекта MockApp:
react-native init MockApp
cd MockApp
Далее запустите его на вашем виртуальном/локальном устройстве, используя:
На экране появится такое изображение:
Стартовый экран приложения
Приложение для работы с API, которое мы создадим, будет выглядеть вот так:
Так в результате выглядит приложение
Теперь откройте проект в текстовом редакторе и скорректируйте App.js, как показано ниже:
В этом коде довольно много информации. Я дам краткий обзор по всем основным ключевым словам в коде, но продолжайте поиск по каждому ключевому слову, которое вам непонятно. Это займет некоторое время.
1. componentDidMount. Это часть React Native в жизненном цикле приложения. componentDidMount() запускается сразу после того, как компонент был добавлен в дерево компонентов.
2. fetch. Чтобы работать с сетевыми запросами, в React Native существует API-интерфейс Fetch.
3. Переменные состояния (isLoading, dataSource). isLoading — это переменная типа bool, которая показывает, загружены данные API или нет. dataSource — переменная, которая сохраняет ответ JSON от команды fetch.
4. FlatList. Это эквивалент RecyclerView в React Native, только намного проще. Компонент FlatList отображает скролящийся лист данных, которые могут изменятся, хотя и имеют общую структуру. FlatList отлично подходит для работы с длинными списками, в которых количество элементов может меняться с течением времени.
Как мы видим, в списке данных нам не нужно отделять переменные для каждого элемента. В этом и заключается красота динамического языка, то есть языка JavaScript. Тип переменной определяется в реальном времени, поэтому работа даже с большими объемами данных остается простой задачей.
Как мы видим, стили каждого компонента уже определены. Нам нужно задать значения переменных. Это можно сделать следующим способом:
На этом наша работа заканчивается. Нам удалось создать приложение, компоненты которого могут предварительно просматриваться благодаря использованию API.
Разработка приложений Android с помощью React Native
Это руководство поможет вам начать работу с React Native в Windows для создания кросс-платформенных приложений, которые будут работать на устройствах Android.
Обзор
React Native — это платформа для разработки мобильных приложений с открытым кодом, созданная Facebook. Она используется для разработки приложений для Android, iOS, Интернета и UWP (Windows). Решение предоставляет собственные элементы управления пользовательского интерфейса и полный доступ к собственной платформе. Для работы с React Native требуется понимание основ JavaScript.
Начало работы с React Native путем установки требуемых средств
Установите Android Studio для Windows. По умолчанию Android Studio устанавливает последнюю версию пакета SDK для Android. Для работы с React Native требуется пакет SDK для Android 6.0 (Marshmallow) или более поздней версии. Мы рекомендуем использовать последнюю версию пакета SDK.
Создайте пути к переменным среды для пакетов SDK для Java и Android:
Установите Node.js для Windows. Вы можете использовать nvm для Windows, если работаете с несколькими проектами и версиями Node.js. Мы рекомендуем установить последнюю версию LTS для новых проектов.
Кроме того, вы можете установить и использовать Терминал Windows для работы с удобным для вас интерфейсом командной строки (CLI), а также Git для управления версиями. Java JDK поставляется с Android Studio версии 2.2 и выше, но, если вам нужно обновить JDK отдельно от Android Studio, используйте установщик Windows x64.
Создание нового проекта с помощью React Native
Используйте npx, средство запуска пакетов, которое устанавливается вместе с npm, чтобы создать новый проект React Native из командной строки Windows, PowerShell, Терминала Windows или интегрированного терминала в VS Code (Представление > Встроенный терминал).
Откройте новый каталог MyReactNativeApp:
Чтобы запустить проект на физическом устройстве с Android, подключите устройство к компьютеру с помощью USB-кабеля.
Чтобы запустить проект в эмуляторе Android, не нужно выполнять никаких действий, так как Android Studio поставляется с установленным эмулятором по умолчанию. Чтобы запустить приложение в эмуляторе для определенного устройства, нажмите кнопку AVD Manager (Диспетчер AVD) на панели инструментов.
.
Чтобы запустить проект, выполните указанную ниже команду. Откроется новое окно консоли, в котором отобразится средство увязки в пакеты Metro в Node.
Если вы используете новую установку Android Studio и еще не разрабатывали приложения Android, при запуске приложения на этапе принятия лицензий для пакета SDK для Android в командной строке могут возникнуть ошибки. Например: Warning: License for package Android SDK Platform 29 not accepted (Предупреждение. Лицензия для пакета Android SDK Platform 29 не принимается). Чтобы устранить эту проблему, нажмите кнопку SDK Manager (Диспетчер пакета SDK) в Android Studio 
. Кроме того, вы можете перечислить и принять лицензии с помощью следующей команды, используя путь к расположению пакета SDK на компьютере.
Чтобы изменить приложение, откройте каталог проекта MyReactNativeApp в удобной для вас среде IDE. Мы рекомендуем использовать VS Code или Android Studio.
Перезагрузите приложение, чтобы отобразились внесенные изменения. Для этого существует несколько способов.
Создание Android-приложения с помощью React Native
Как следует из названия, в этой статье мы рассмотрим процесс создания средствами React Native приложения под Android. Оно будет простеньким, всего лишь с текстовым полем. Туда нужно будет ввести имя одного из покемонов, а приложение покажет подробную информацию о полученных данных и зачитает её с помощью функции преобразования текста в речь.
Мы не будем касаться установки Android SDK, React Native и создания проекта, или каких-то иных инструментов разработчиков. Будем исходить из того, что это ваш первый опыт создания приложения с помощью React Native, поэтому подробно рассмотрим каждый кусок кода.
Создание сервера
Для начала нам нужно создать серверный компонент нашего приложения. Писать мы его будем на РНР, а в роли базы данных выступит CouchDB. Инструкции по установке: РНР и CouchDB. После инсталляции и настройки нужно проверить, чтобы была запущена база данных. Для этого выполним curl localhost:5984 и получим в ответ что-то вроде:
Для получения доступа к Futon, системе управления CouchDB, откройте в браузере http://localhost:5984/_utils. Кликните Create Database, чтобы создать базу данных для хранения подробных данных, получаемых от Pokemon API. Назовите базу pokedex и кликните Create. Можно было бы обратиться к API напрямую из React Native, но тогда увеличивается сетевой трафик. А если хранить всё в БД, то можно получать данные по единственному запросу и в любое время.
Сохранение данных
Теперь перейдём непосредственно к созданию серверного компонента. Внутри вашей папки веб-сервера сделайте рабочую папку, внутри неё создайте файл composer.json и внесите в него код:
Теперь создайте внутри рабочей папки файл pokemon.php, а затем внесите в него код:
Рассмотрим приведённый выше код. В первую очередь добавляется файл автозагрузки. Он автоматически подгружает все библиотеки, установленные нами с помощью Composer. Далее параметру set_time_limit присваивается нулевое значение. Дело в том, что у РНР-скриптов по умолчанию продолжительность выполнения ограничена, и по окончании этого времени скрипт прерывается. Обнулив вышеуказанный параметр, мы отключаем временной лимит.
На момент написания этой статьи существовал 721 покемон, и для каждого из них нам нужно выполнить по три HTTP-запроса, чтобы получить подробные данные, описание и спрайты.
Инициализируем CouchDB-клиент и внесём название нашей базы данных:
С помощью функции file_get_contents получаем от API полный список покемонов. Данные будут возвращены в формате JSON, поэтому для дальнейшей работы нам придётся конвертировать их в массив:
Прогоняем цикл по всем результатам:
Внутри цикла для каждого покемона мы обращаемся к resource_uri и используем его для создания URL, возвращающего подробные данные:
Данные, полученные в ответ на предыдущий запрос, мы используем для создания запроса на описание покемона и его спрайты:
Сохраним полученную информацию в CouchDB:
Для начала сохранения откроем в браузере файл pokemon.php. Это займёт какое-то время, а пока можно переходить к следующему шагу.
Извлечение данных
Для извлечения данных из CouchDB нам нужно создать вид (view). Зайдите в созданную нами базу данных, кликните View в выпадающем меню и выберите Temporary view. Под текстовым полем map function вставьте код:
Теперь кликните на кнопке Run, чтобы проверить, как отобразятся наши данные:
Кликните на Save as, введите в поле Design document название базы pokemon, а в поле View name — by_name. Теперь вернитесь в рабочую папку, создайте файл get.php и внесите в него код:
Давайте разберём его. Сначала мы получаем имя покемона, отправленное нам приложением:
Далее нужно проверить наличие результатов. Если они есть, то возвращаем JSON-версию, в противном случае возвращаем сообщение об отсутствии данных.
Если вы работаете на локальной машине, то можете открыть для сервера доступ в интернет с помощью Ngrok. Либо воспользуйтесь внутренним IP, позднее он ещё будет использоваться в нашем приложении.
Создание приложения
Установка зависимостей
Начнём с инициализации нового проекта в React Native:
react-native init Pokedex
Когда операция будет завершена, посредством npm установите зависимости:
Что делает этот код:
По завершении установки зайдите в репозиторий React Native Android Speech и настройте в соответствии с инструкциями.
Выполнение сетевых запросов
В корневой директории проекта React Native создайте папку src, внутри неё создайте файл api.js и внесите в него код:
С помощью метода fetch экспортируется функция извлечения данных с сервера. Таким способом в React Native осуществляются сетевые запросы. Этот метод получает URL для создания запроса, возвращает обещание (promise) использовать метод then и получает ответ с помощью callback-функции.
Внимание: удостоверьтесь, что вы поменяли http://192.168.xxx.xxx/ на ранее упомянутый IP адрес или доменное имя. Помните, что pokedex — это папка внутри веб-индекса.
Главный файл приложения
Откройте файл index.android.js. В нём должен присутствовать некий код по умолчанию, удалите его весь.
В начале каждого файла мы будем включать строгий режим. Это поможет избежать распространённых ошибок, наподобие отсутствия определения переменной до инициализации значения.
Импортируйте React Native и дополнительные зависимости проекта:
Инициализируйте все необходимые компоненты и API:
В React Native доступны различые компоненты и API. Они по умолчанию не загружаются, поэтому вам придётся конкретно указать всё, что нужно. Можете рассматривать их как элементы пользовательского интерфейса. Допустим, в веб-странице есть текстовые поля, списки, таблицы, изображения, вкладки и т.д. В React Native все эти элементы интерфейса являются компонентами. Например, есть компоненты для отображения картинок, для отображения панелей прокрутки, для создания списков и т.д.
API в React служат для получения доступа к разным возможностям устройства, вроде камеры и пуш-уведомлений. Какими-то API вы будете пользоваться достаточно редко, а какие-то нужны в каждом проекте. В качестве примеров можно привести StyleSheet и AppRegistry.
Вот короткое описание компонентов и API, которые мы используем в нашем приложении:
Создайте новый кастомный компонент в React, содержащий всю логику интерфейса и приложения:
Инициализируйте состояние внутри класса. Под «состоянием» в React Native подразумевается способ хранения данных, которые будут доступны в рамках всего компонента.
Интерфейс возвращается внутри метода.
Разберём этот код. Создаём основной контейнер:
Внутри основного контейнера присутствует компонент, предназначенный для ввода имени покемона. У него три атрибута:
dataSource позволяет определить источник данных для рендеринга списка, а renderRow задаёт функцию, выполняемую при рендеринге каждого элемента списка.
После выведения на экран результатов поиска идёт компонент, который отображается при отсутствии результатов.
Как следует из ответа, возвращаемого сервером, объект types содержит массив объектов, соответствующих разным типам покемонов:
С помощью модуля api выполняем сетевой запрос:
Обратите внимание: синтаксис callback-функции немного отличается от привычного нам.
Внутри callback-функции задаётся текст по умолчанию, который будет преобразовываться в речь.
var speech = ‘Pokemon was not found. Please type the exact name.’;
Иными словами, вы должны настроить все необходимые значения в состоянии:
Сразу под условиями задействуйте модуль преобразования в речь:
После закрывающих скобок класса Pokodex добавьте стили с помощью StyleSheet API:
У нас есть стили для поиска, вывода результата, отсутствия результата и загрузки:
Далее идёт объявление стилей – стандартный CSS.
Далее настраиваем стили для типа покемона. К примеру, если это электрический покемон, то фон контейнера будет жёлтого цвета.
Запуск приложения
Сначала удостоверьтесь, что работает ваш РНР-бэкенд, а затем с помощью команды react-native run-android запустите компиляцию и выполнение приложения на вашем устройстве или в эмуляторе. В этот момент вы получите ошибку:
Затем вернитесь на главный экран приложения, снова откройте меню разработчика и выберите пункт Reload JS. Приложение будет перезапущено, теперь всё должно работать.
Распространённые проблемы
Запуск сервера React
Если вы получили ошибку при запуске, то причиной наверняка является Watchman.
Error building DependencyGraph:
Error: Watcher took too long to load
Try running `watchman version` from your terminal
https://facebook.github.io/watchman/docs/troubleshooting.html
at [object Object]._onTimeout (index.js:103:16)
at Timer.listOnTimeout (timers.js:89:15)
Для её исправления выполните следующие команды:
sudo sysctl fs.inotify.max_user_instances=99999
sudo sysctl fs.inotify.max_user_watches=99999
sudo sysctl fs.inotify.max_queued_events=99999
Если не сработало, попробуйте так:
Эти команды задают количество просмотров разных корневых папок, вложенных в них папок, а также количество событий в очереди. Последняя строка прерывает выполнение сервера Watchman, чтобы применились внесённые изменения.
Проблемы с приложением
После запуска сервера React вы можете столкнуться с тем, что приложение всё равно не запускается. Это происходит по двум причинам:
Отладка и живая перезагрузка
Когда приложение запустится, вы можете воспользоваться такими приятными вещами, как отладка в Chrome и живая перезагрузка. Для этого нужно открыть меню разработчика и поставить галочки в пунктах Debug in Chrome и Enable Live Reload. Теперь вы можете просматривать console.log и отслеживать ошибки из консоли Chrome. А живая перезагрузка бывает полезна, когда нужно перезапустить приложение для внесения изменений в исходные файлы.
Что дальше?
Куда двигаться дальше после того, как вы создали своё первое приложение с помощью React Native app?
Как я написал мобильное приложение на react-native
Меня зовут Алексей Андросов, я уже много лет работаю в Яндексе фронтенд-разработчиком. Два года назад мне и моим партнерам пришла в голову идея создать мобильную социальную сеть Verb. Идея Verb в том, что пользователи могут делиться небольшими статусами — “вербами” — о том, чем они занимаются в данную минуту, простыми вещами, о которых хочется рассказать друзьям, но некуда об этом написать. И мы уже даже получили инвестиции, но сейчас не об этом. Сегодня я хочу рассказать о том, как и почему я написал мобильное приложение на react-native.
У меня есть бэкграунд бекенд-разработчика, более 10 лет опыта веб-разработки, но создание мобильного приложения для меня было абсолютно новой областью. Что было делать в такой ситуации? Быстро изучить Objective-C или Swift для iOS и Java для Android? Параллельно писать два приложения сразу показалось плохой идеей, я один явно не смог бы быстро реализовывать все идеи на двух платформах. Поэтому я начал искать варианты для кроссплатформенной разработки.
Как раз кстати пришлась шумиха вокруг React, появился react-native. Тогда мне и захотелось его попробовать. Оглядываясь назад, выбор на react-native пал, по большому счету, не из-за каких-то объективных причин, а скорее из-за субъективных: до него уже были PhoneGap (WebView на JavaScript, CSS, HTML), Xamarin (C#) и NativeScript (JavaScript, TypeScript, Angular).
Опыт работы с PhoneGap у меня уже был и использовать его не хотелось (уже очень подкупали нативные компоненты вместо их реализации на веб-технологиях), C# я не знал, писать на Angular не хотелось, так что выбор пал на RN.
Как и NativeScript, RN имеет биндинги нативных компонент в JS, схожую систему работы (об этом поговорим позже) и возможности.
Первой версией, с которой мы начали, стала 0.7.1 (текущая версия — 0.46), первый мой коммит 21 июля 2015. Поддержки Android тогда не было совсем. Она появилась только в сентябре 2015 (0.11). При этом это была “первоначальная поддержка” платформы с кучей проблем и недоработок. Пройдет еще много времени до того, как поддержка iOS и Android станет более-менее равноценной в react-native.
Забегая вперед, скажу, что Android-версию мы в какой-то момент все же решили писать на Java. Приложение уже было нужно, а RN в тот момент оказался не готов (на текущий момент такой проблемы уже нет). А вот iOS-версия Verb полностью написана на react-native.
Что такое react-native?
Итак, react-native – это фреймфорк для разработки на react кроссплатформенных приложений для iOS и Android. React здесь используется именно как идея, а не реализация: JSX, компонентный подход, state, props, жизненный цикл компонентов, CSS-in-JS.
Если проводить аналогию с обычной веб-разработкой, то тут:
Чтобы было проще понять, приведу аналогию с привычным HTML. — это
CSS выглядит более привычным:
StyleSheet объявляет и компилирует стили, они сразу напрямую передаются в native, чтобы не гонять каждый раз. PixelRatio нужен для пропорционального увеличения размера элементов в зависимости от экрана.
Как работает RN
Если прекрасная статья от Tadeu Zagallo про кишки RN, я вам вкратце расскажу ее суть.
В iOS есть три треда:
— shadow queue — очередь обработки и отрисовки layout
— main thread — тут работают компоненты
— JavaScript thread — тут работает JS
Общая схема работы выглядит так: исполняется JS (по сути React), результат работы надо передать в нативный код. Для этого есть специальный мост, который с помощью JSON передает набор инструкций. RN их исполняет и отрисовывает нативные компоненты платформы. Результат работы через тот же мост может вернуться обратно в JS.
Все общение асинхронное. При этом самым узким местом является непосредственно мост, сериализация и десериализация данных. Отсюда интересные особенности:
Write once, run everywhere?
Не тут-то было ). На самом деле парадигма звучит так: learn once, write everywhere. Почему так получается? Все нативно, поэтому забудьте про полную кроссплатформенность. Платформы разные, поэтому и нативные компоненты разные. У них разная логика работы и механика взаимодействия. В основном это касается компонентов навигации и взаимодействия с пользователем. Поэтому в начале разработки имеет смысл сразу накидать болванку приложения с базовыми экранами и переходами. На этом разница заканчивается, все внутренние компоненты скорее всего окажутся одинаковыми. Удобство добавляет и сам RN, весь платформоспецифичный код можно разделять на файлы component.ios.js и component.android.js, тогда для каждой платформы будет собираться своя версия без всяких if внутри.
iOS версия Verb изнутри
Изнутри приложение написано на react-native + redux. Redux пригодился, кстати, не только, как хорошая библиотека для организации работы с состоянием приложения, но и для общения между компонентами. RN провоцирует писать pure компоненты без сайд-эффектов или использования глобальных объектов, поэтому общение компонентов через общий state является чуть ли не единственным нормальным способом.
Так же мы используем геолокацию и пуши. В react-native для этого есть все необходимое.
Важная часть — производительность. Как я уже писал, узким местом в RN является мост JS native, поэтому проблема уменьшения количества перерисовок становится во весь рост. Отсюда следует, что все советы и best practice от react и redux имеют очень большое значение. React.PureComponent или shouldCompomentUpdate, меньше connect-компонентов, плоские структуры данных, иммутабельность — все дает хороший прирост производительности.
Неочевидные советы
Не надо затягивать обновление версий. Раньше, когда RN выпускался раз в 2 недели и почти каждая версия имела несовместимые изменения, этот совет имел очень большое значени. За 1-2 месяца фреймворк мог измениться очень сильно, поэтому обновляться сразу на пару версию было очень сложно. Сейчас ситуация обстоит лучше, релизы раз в месяц, фреймворк уже не меняется так сильно. Но я как и раньше обновляюсь сразу, как только выходит новая версия.
Унификация react-компонент (тут понадобится помощь дизайнера) позволяет очень быстро разрабатывать новые экраны. Вообще, компонентный подход и быстрое связывание компонент — это хорошая фишка как react, так и react-native.
boilerplate для создания новых экранов в rn + redux достаточно большой. Как и в react+redux, так и rn+redux придется написать много кода для создания нового экрана: создать компонент экрана, зарегистрировать его в Navigator, написать actions и reducer для перехода на экран. Плюс к этому стандартный boilerplate для обработки данных для нового экрана.
Не надо все писать на JS. Приложение надо писать максимально близко к native, искать биндинги в нужные native-компоненты или писать их самим. Уверяю, это совсем не сложно.
Надо участвовать в сообществе. В RN достаточно багов и недоработок, но нет никаких проблем их поправить. Мейнтейнеры активно участвуют в PR. Правда, зачастую приходится исправлять баги в самом native-коде, так что Java или Objective-C придется подучить. Все мои PR приняли. Например, я исправил несколько багов в работе камеры или загрузке фотографий на сервер.
Заключение
Писать на react-native оказалось удобно, быстро и приятно. Он правда позволяет быстро создавать прототипы приложений и доводить их до релиза. Технология молодая, поэтому есть типичный проблемы early adopters (например, периодические несовместимые изменения). Но с каждый релизом RN становится все лучше и стабильнее, Facebook прилагает к этому много усилий и делает на него ставку. К текущему моменту часть приложения Facebook уже написано react-native, а поддержка Android достигла уровня iOS.
Я достаточно поработал с технологией и могу сказать, что написать не слишком большое iOS-приложения, аналогичное Twitter или Instagram, вполне реально. К сожалению, глубоко попробовать android так и не получилось, поэтому утверждать не могу, но, надеюсь, что в будущем можно будет попробовать конкурировать с нашей нативной iOS-версией.