код версии 1 уже использован попробуйте другой react native
Как обновить номер версии приложения react native
Я использую React native с Android. Как я могу обновить номер версии в приложении? Как я получаю эту ошибку.
Я попытался изменить файл AndroidManifest.xml, но после того, как я его построю, этот файл автоматически будет изменен обратно.
Здесь я изменил XML:
После этого файл сборки автоматически изменяется обратно.
6 ответов
В настоящее время я нахожусь на версии 0.45.1, которая довольно стара. И я пытаюсь обновить его так, чтобы другие зависимости работали так, как ожидалось (они обновили свои библиотеки и требуют 0.46.1 и выше). Я слежу за этим процессом: удалить папку node_module измените номер версии react-native.
В настоящее время в моем проекте я использую версию react-native 0.56.0. Я хочу обновить свой проект до последней версии 0.61, и я использовал почти 60 сторонних модулей, как лучше всего обновить свой проект до последней версии react-native. может ли кто-нибудь подсказать мне, как я могу сделать.
Вы должны изменить свои versionCode и versionName в android/app/build.gradle :
Вот как я автоматизирую это и привяжу его к версии пакета в коммитах package.json и git.
Для тех, кто хочет автоматизировать это и одновременно иметь iOS, вы можете использовать react-native-version для установки номеров версий.
Все, что вам нужно сделать, это обновить номер версии внутри файла package.json и выполнить следующее:
Я надеюсь, что это может помочь другим.
Установите versionCode под android в app.json:
При построении React Native для iOS или Android с помощью Visual Studio App Center, как вы используете Номер сборки как часть номера версии приложения? Например: Major.Minor.Build, где Major и Minor настраиваются командой разработчиков, но сборка обеспечивается центром приложений.
У меня была та же проблема, и я проверил все вышеприведенные ответы, я сделал глупую ошибку, из-за которой у меня ничего не получалось. На всякий случай, если кто-нибудь из вас совершит ту же ошибку, что и я, попробуйте вот это.
Итак, в project/app/build.gradle году
Если кто-то сталкивается
неправильный код версии eg-31284
Затем убедитесь, что вы не используете SeparateBuildPerCPUArchitecture в android/app/build.gradle
def enableSeparateBuildPerCPUArchitecture = false
чтобы обновить код версии и изменить имя в android/app/build.gradle :
Похожие вопросы:
Я пытаюсь перейти на последнюю версию react-native(react-native-0.26.2), чтобы использовать react-native-flux-router. Я получаю эту ошибку: Консоль chrome показывает только сообщения об ошибках по.
Я совершенно новичок в RN,только начал пару недель назад изучать его. Я получил react-native v.0.47, который был последним в то время. Теперь я вижу, что есть новая версия 0.48. Как новичок, у меня.
В настоящее время я нахожусь на версии 0.45.1, которая довольно стара. И я пытаюсь обновить его так, чтобы другие зависимости работали так, как ожидалось (они обновили свои библиотеки и требуют.
В настоящее время в моем проекте я использую версию react-native 0.56.0. Я хочу обновить свой проект до последней версии 0.61, и я использовал почти 60 сторонних модулей, как лучше всего обновить.
При построении React Native для iOS или Android с помощью Visual Studio App Center, как вы используете Номер сборки как часть номера версии приложения? Например: Major.Minor.Build, где Major и Minor.
Есть ли способ установить версию приложения и номер сборки для приложения react-native-web? В настоящее время я использую react-native-web для приложения (для IOS, Android и Web). Я также использую.
Есть ли у нас какая-либо документация, которая могла бы помочь в обновлении версии React native в рамках существующего приложения React native? Поскольку недавно выпущена новая версия React native.
Руководство по 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.
React Native in-app purchases: конфигурация и получение списка продуктов
Всем привет, я Ваня — фулстак разработчик в Adapty. Сегодня расскажу про добавление in-app покупок в приложения на React Native.
Кросс-платформенные фреймворки для разработки приложений сильно облегчают жизнь разработчикам, позволяя писать сразу для нескольких платформ. Однако есть свои нюансы. Например, в React Native не существует базового инструмента для внедрения внутренних покупок. Поэтому неминуемо приходится пользоваться сторонними библиотеками.
Самые популярные библиотеки для добавления покупок в приложения на React Native — это react-native-iap, expo-in-app-purchases. А расскажу я про react-native-adapty, потому что по сравнению с другими библиотеками, у неё есть преимущества:
в отличие от других библиотек, есть серверная валидация покупок;
библиотека поддерживает все текущие фичи магазинов от промо-офферов до оплаты наперёд, а поддержка новых функций появляется в ней быстро;
код получается чище и понятнее;
можно менять предлагаемые продукты, добавлять и убирать предложения без прохождения полного релиз-цикла: не надо выпускать беты и ждать одобрения.
Кроме того, Adapty SDK даёт много других бонусов: встроенная аналитика по главным метрикам, когортный анализ, серверная валидация покупок, A/B тестирование пейволлов, промо-кампании по гибким сегментам, интеграции с системами аналитики.
Но пока поговорим о настройке in-app purchases на React Native. Вот что нам сегодня предстоит:
Почему Expo не подойдёт для внедрения in-app purchases в приложениях на React Native.
Создание аккаунта разработчика — ссылки на инструкции.
Настройка Adapty:
конфигурация App Store
конфигурация Play Store
Пример приложения и результат.
В статье мы попробуем написать приложение, которое будет показывать картинки котов подписанным юзерам, а остальным — предложение подписаться.
Почему Expo не подойдёт для внедрения in-app purchases в приложениях на React Native
> TL;DR — Expo managed не поддерживает нативные методы магазинов для работы с покупками (сторкитов). Нужен либо совсем чистый RN, либо Expo bare workflow.
Тех, кто сразу подумал о том, чтобы использовать Expo, придётся разочаровать — он для этих целей не годится. Expo — это фреймворк для React Native, с которым разработка многократно упрощается. Однако для покупок/подписок их полноценный workflow не подходит. Expo не использует нативный код в своих методах и компонентах (только js), что требуется для сторкитов. Сделать покупки через js в мобильных магазинах не выйдет, так что надо эджектиться.
Создание аккаунта разработчика
Для начала нам предстоит настроить аккаунты в магазинах, создать и подготовить покупки/подписки и для iOS, и для Android. Этот процесс вряд ли займет больше 20 минут.
Если вы еще не настроили аккаунты разработчика и продукты в App Store Connect и/или Google Play Console, то можете познакомиться с инструкциями по ссылкам:
Для iOS — от начала статьи и вплоть до «Получение списка SKProduct» — там уже начинается нативная реализация
Для Android — аналогично от начала статьи до «Получение списка продуктов в приложении».
Настройка Adapty
В случае react-native-adapty для начала надо настроить дашборд Adapty. Это занимает немного времени, зато по сравнению с хардкодом, в результате вы получите все описанные выше преимущества.
На третьем шаге после регистрации нам предлагают сконфигурироваться для App Store и Google Play:
Для работы с iOS нам нужно:
установить App Store Server Notifications;
App Store Connect shared secret.
Это обязательные поля для того, чтобы покупки работали.
К каждому полю есть Read how — там очень понятные и актуальные пошаговые туториалы, лучше посмотрите туда.
Bundle ID — это уникальный ID вашего приложения. Здесь он должен совпадать с тем, что вы написали в Xcode в Targets > [App Name] > General:
Для Android обязательны Package Name и Service Account Key File.Точно так же есть актуальные Read how. Package name — аналог Bundle ID с iOS. Нужно указать такой же, как и в коде. Найти его можно в файле /android/app/build.gradle в разделе android.defaultConfig.applicationId :
На четвёртом шаге нам предлагают добавить Adapty SDK в наше приложение. Однако мы этот шаг пропустим и настроимся чуть позже.
После того, как зарегистрировались, идем в настройки и запоминаем, что здесь лежит наш ключ (Public SDK key) — он нам понадобится чуть позднее:
Добавление подписки
Для разных подписок в Adapty существуют продукты. У вас может быть подписка только на фото котов, но на месяц, полгода, год. Каждый этот вариант будет соответствовать одному продукту в Adapty.
Давайте укажем в дашборде, что у нас есть один продукт. Идем в раздел Products & A/B Tests → Products, кликаем Create product.
Здесь надо указать название продукта — то, как конкретная подписка будет выглядеть в интерфейсе Adapty.
Также надо указать App Store Product ID и Play Store Product ID. Период и название можно выставить для работы с аналитикой. Сохраняемся.
Создание пейволла
Теперь надо создать пейволл — экран, который ограничивает доступ к платным функциям и предлагает купить подписку. В пейволл надо будет добавить созданный продукт. Для этого в этом же разделе Products & A/B Tests → Paywalls кликаем Create paywall.
В Paywall name вносим название пейволла. Важно делать его таким, чтобы потом и вы, и ваши коллеги могли легко по названию разобраться, что это за пейволл.
В Paywall ID я напишу cats_paywall — по этому ID мы будем искать пейволл в приложении.
В выпадающем меню Product добавляем нашу подписку.
Вот и вся настройка, дальше будем устанавливать зависимости и кодить.
Установка react-native-adapty
1. Сначала подключаем зависимость:
3. Так как на iOS React Native проекты написаны на Obj-C, нам надо создать Swift Bridging Header, чтобы Obj-C мог читать Swift библиотеки. Для этого просто идем в Xcode проект, создаем новый любой Swift файл. Xcode нам предложит создать bridging header — то, что нам и нужно. Соглашаемся.
4. Для Android надо убедиться, что в проекте (/android/build.gradle по дефолту) стоит kotlin-gradle-plugin версии 1.4.0 или выше:
5. Для Android надо включить multiDex, на этот раз в конфигурации приложения (/android/app/build.gradle по дефолту):
Все настроено! Теперь можно отдыхать начинать кодить! 🎉
Кодим: Получение списка продуктов в приложении
Под капотом react-native-adapty происходит много полезных штук, которые обязательно пригодятся, если не сейчас, то несколько позже. Поэтому библиотеку следует инициализировать в самом начале флоу. Идем как можно выше в приложении (можно прямо в App.tsx ) и инициализируемся:
Соответственно, вместо MY_PUBLIC_KEY пишем тот самый Public SDK ключ, который мы получили при настройке дашборда. На самом деле, метод activateAdapty() можно вызывать и больше одного раза, и больше, чем в одном месте — ничего страшного не будет, однако мы ограничимся такой версией.
Теперь можем получать те продукты, которые мы добавили в дашборде Adapty:
Теперь к практике. Давайте попробуем написать небольшое приложение, где мы сможем смотреть продукты из наших пейволлов и делать покупки.
Пример приложения
Здесь я позволю себе писать достаточно плотно, чтобы не усложнять базовую логику. Также писать буду на typescript, чтобы показать, где какие типы фигурируют. Проверять весь код буду на своем стареньком iPhone 8 — важно понимать, что, начиная с iOS 14, App Store запрещает использовать сторкиты на симуляторах — только реальные девайсы.
Корневой компонент App.tsx
На самом деле, мы могли не сохранять пейволлы в стейт, а фетчить их прямо тут — adapty.paywalls.getPaywalls() по умолчанию возьмет их из кэша (а закэшит при открытии приложения), то есть не надо будет ждать, пока метод сходит на сервер.
2. Теперь напишем компонент пейволла в том же файле:
Тут мы просто мапим продукты из пейволла и показываем к каждому продукту кнопку покупки.
4. Теперь осталось только добавить действие на тап кнопки «Показать пейволл»; в моем случае, он будет открывать модальное окно через Navigation :
Вот и все! Теперь мы можем показывать пейволлы юзерам.
Если вы хотите протестировать покупки на iOS сэндбоксе, то вам нужно будет завести сэндбокс-тестер аккаунт. Тут стоит помнить, что сэндбокс-подписки инвалидируются быстрее, чтобы было удобнее тестировать. На андроиде дополнительные аккаунты не нужны, и даже можно тестить на симуляторе; подписки также ускорены.
Проверка юзера на наличие активных подписок
Теперь остается вопрос, где хранить информацию об активных подписках, чтобы давать конечному пользователю его премиум контент. Здесь Adapty нам тоже поможет — он сохраняет все покупки, связанные с пользователем. Давайте сделаем так: если у юзера нет подписки, то мы также показываем кнопку пейволла, но если подписка есть, то мы показываем кота.
Информация об активной подписке берется из кэша или сервера, так что нужен будет лодер. Для простоты давайте добавим стейты isLoading и isPremium :
Дальше вроде все понятно: если у юзера премиум, то нам и не надо фетчить пейволлы, просто вырубаем лодер и показываем контент:
Здесь мы добавили функцию, которая рендерит нужный контент, и добавили в onRequestBuy кусок логики — обновление стейта isPremium и закрытие модального окна.
Весь файл
Что в итоге
В итоге, у нас вышло замечательное и очень полезное приложение с подписками. Те, кто платят, будут видеть котов, а другим будет показываться пейволл. Этих знаний должно хватить, чтобы вы смогли построить все необходимое для покупок в вашем приложении. А для тех, кто хочет погрузиться в мир возможностей сторкитов чуть глубже, продолжение следует. Спасибо!
Про Adapty
Adapty не только упрощает техническую реализацию подписок:
Встроенная аналитика позволяет быстро понять основные метрики приложения.
А/Б тесты увеличивают выручку приложения.
Интеграции с внешними системами позволяют отправлять транзакции в сервисы атрибуции и продуктовой аналитики.
Промо кампании уменьшают отток аудитории.
Open source SDK позволяет интегрировать подписки в приложение за несколько часов.
Серверная валидация и API для работы с другими платформами.
Познакомьтесь подробнее с этими возможностями, чтобы быстрее внедрить подписки в своё приложение и улучшить конверсии.
Kivy. Xamarin. React Native. Три фреймворка — один эксперимент (часть 3)
Задача сравнения фреймворков очень неблагодарное занятие, предпочтения у разработчиков разные, технологии меняются очень быстро. Слишком быстро. Эта статья, устареет еще до того момента как я нажму кнопочку “опубликовать“.
Попытки сравнить были, так, порядка пяти лет назад, ребята (Colin Eberhardt и Chris Price) воодушевили ряд разработчиков сделать приложение для поиска недвижимости по четко составленному ТЗ. Идея классная, мы даже участвовали и сделали версию этого приложения на DevExtreme. Но в плане поддержки такой проект это ад и сейчас проект Property Cross, представляет некоторый исторический пласт, который вызывает ностальгию и теплые чувства, но вряд ли несет практическую пользу.
Если брать только js мир, то есть довольно живой проект todomvc, который сравнивает только js часть, без упаковки в мобильное, десктопное или какое бы то ни было приложение. Проект живой и поддерживается. Скорее всего, есть еще очень классные примеры, которые мы не заметили в выдаче гугла когда готовили статью, но не будем огорчаться из-за этого.
Наш эксперимент менее амбициозен и показывает только текущий срез технологий, даже его малую часть. Вот ссылочка на первую и вторую статьи эксперимента.
Дальнейшее чтиво это третья статья, о том как сделать приложение на React Native по ТЗ. Оно очень похоже на сотни, а может быть и тысячи, других пересказов документации о том как сделать приложение на React Native. Дорогой читатель, я тебя предупредил, совесть моя чиста.
Вспоминаем ТЗ
Вообще, его можно полностью посмотреть в первой статье. Но я добавлю картинку того, что должно получится в итоге. Картинок мало не бывает.
Щепотка матчасти. Что такое React Native
React Native — фреймворк для создания кроссплатформенных мобильных приложений от Facebook. Как и в «обычном» React для веб, UI приложения собирается из кирпичиков — компонентов, которые реагируют на изменение своего состояния (state) и свойств им переданных (props), но, в отличие от веб, рендерятся в нативные контролы.
В идеале, используются принципы иммутабельности и чистые фунции, что обеспечивает простоту и изолированность тестирования. И тут стоит заметить, что сам по себе React очень простой, и эта простота переходит и в мобильную часть.
Дополнительные надстройки в нативном и JS коде сглаживают различие между платформами, когда это возможно. Фактически React Native обеспечивает некоторую унификацию свойств для компонента в каждой операционной системе.
Например, ScrollView, и HorizontalScrollView это 2 разных компонента в Android. А в iOS UIScrollView, который поддерживает как горизонтальный так и вертикальный скролл. А в React Native мы будем использовать следующий кроссплатформенный код:
При грамотном подходе на выходе получаем «честное» нативное приложение, работающее на iOS и Android.
В идеальном мире, разрабатывая на React Native, вам не придется писать на Java или Objective-C. Но такая возможность есть, когда необходимо реализовать компонент, который выходит за рамки возможностей React Native.
С этим много играли разработчики из Airbnb, и мы можем посмотреть много достойных реализаций в реакт комьюнити, которые раньше находились в их репозитории. Например Lottie — библиотека для импорта анимаций из Adobe After Effects, или кросс-платформенные карты.
JS код в приложении исполняется на движке JavaScriptCore. Коммуникация между нативным кодом и JS осуществляется с помощью асинхронного моста (bridge), который позволяет передавать свойства (props), вызывать события (events) и выполнять коллбеки.
Картинка взята из отличной переработки документации React Made Native Easy. (Настоятельно рекомендую к прочтению.)
В процессе сборки для преобразования JS кода используется новомодный babel, это позволяет использовать новый синтаксис ES6, а также некоторые фичи ES8 (например async-await). Если вы, мой дорогой читатель, js разработчик, то понимаете как хорошо, когда есть спред оператор и как плохо, когда его нет.
Для верстки страниц используется технология flexbox, реализованная кроссплатформенным движком Yoga. Она имеет отличия от браузерного flexbox, но они незначительны и, в основном, касаются дефолтов. Конечно, есть нюансы, но вам обязательно повезет, и все будет только согласно документации.
Подготовка и развертывание стека. Ламповый терминал
Для работы с RN нам потребуются Node.js и менеджер пакетов npm, который идет в комплекте. Не обязательно, но очень желательно установить на свой девайс приложение Expo. Оно позволит запустить наш проект на телефоне, а также собрать и запустить приложение для iOS, когда у вас под рукой нет macOS.
Создадим новое приложение. Для этого используем пакет create-react-native-app.
В терминале выполняем:
Сканируем QR-код с помощью Expo или вводим ссылку из терминала, или даже отсылаем ссылку себе на телефон, прямо из терминала.
У меня вообще есть подозрение, что в разработчики cli для react native затесался седоволосый старец, который застал roguelike игрушки без ui, когда есть только терминал, и вместо топовой видеокарты только твоя фантазия.
Но мы, тем временем, только что создали и запустили “Hello World” приложение.
И целого “Hello World”-a мало. Анализируем ТЗ
Согласно ТЗ, структура данных приложения будет такой
Для работы с такими данными я бы взял какое-нибудь очень модное решение на основе CQRS. Это позволило бы сохранить целостность данных, обеспечить высокую скорость чтения с возможностью перестраивания проекций, а также быстрый деплой в облако одной командой. Как Resolve, который разрабатывают наши коллеги.
Но не возьму, у нас же простой эксперимент, без бекенда. И для простоты буду использовать архитектуру flux, в частности ее реализацию — redux. Данные из состояния приложения приходят в компоненты в качестве props. Компоненты могут вызвать actions, чтобы обновить данные.
Для навигации между экранами буду использовать стандартную библиотеку react-navigation. Циферки около графика на странице библиотеки, показывают сколько раз ее скачивают в неделю. Сейчас там порядка 100 тысяч, в неделю. Хорошо, что я не один выбрал такую библиотеку для навигации. И да, можно посмотреть циферки у других npm пакетов, которые я указал в этой статье, чтобы примерно понимать количество пользователей данной технологии на данный момент времени.
Создаем приложение
Для React Native компонент App из файла App.js это точка входа в приложение.
Store с данными и состоянием приложения подключается компонентом Provider из библиотеки react-redux. Это обеспечивает проброс данных для вложенных компонентов.
Создадим навигатор для переходов между экранами в приложении. Он четко отражает структуру приложения, заявленную в эксперименте, и отрисовывает анимированные переходы между экранами для каждой из платформ.
Экраны навигатора это компоненты — контейнеры. Они получают данные из стейта приложения.
Список проектов — Projects
На экране со списком проектов будет список и кнопка добавления проекта — в хедере окна справа. Новый проект будем создавать на экране Project.
Для навигации используем объект navigation, который передал в props родительский компонент — навигатор.
Для вывода списка проектов будем использовать FlatList — кросс-платформенный список с виртуализацией:
Для каждого элемента задаем уникальный ключ — у нас это id элемента. Это нужно для того, чтобы реакт мог различать элементы в списке и обновлять только те, которые изменились.
Добавим компонент для элемента списка.
TouchableOpactity — обертка, реагирующая на нажатия. При нажатии вложенный компонент становится прозрачнее.
View — аналог div для веб — базовый компонент разметки.
Text — контейнер для текста.
Синтаксис стилей напоминает css, главное отличие — стилизовать можно только сам компонент (например нельзя задать размер шрифта для всего приложения, только для конкретного компонента Text)
Детальная страница проекта со списком заметок — Project
Аналогично создаем детальную страницу. Отличия только в наличии заголовка в навигаторе и дополнительного инпута. В навигаторе зададим заголовок — название проекта. Если id проекта не задан — предложим ввести название проекта и создадим новый.
Страница проекта представляет собой список заметок. По ТЗ для каждой заметки есть контекстное меню с редактированием и удалением. Также удалить заметку можно свайпом. В React Native существует отдельный список, с возможностью свайпа — SwipeableFlatList.
При удалении заметки мы запросим подтверждение, для этого вызовем стандартный системный Alert
Есть интересный момент для контекстного меню. В отличие от алерта, его реализация в RN для Android и iOS различается.
Для андроид используем попап меню
Для iOS — actionSheet
Есть несколько способов разделить платформо-зависимый код. Мы воспользуемся объектом Platform.
Детальная страница заметки — Note
Страница заметки также довольно примитивна. Но, в отличие от предыдущих, мы используем state для хранения промежуточных результатов ввода пользователя.
Детальный экран заметки — классический “глупый” компонент — докладывает наверх об изменении текста и показывает текст, который ему передает родитель
Итого мы получили приложение как в ТЗ. Эксперимент завершен. Код приложения можно посмотреть в общем репозитории
Итого, плюсы и минусы React Native
Плюсы:
React Native привычен и понятен разработчикам, знакомым с React и инфраструктурой Node.js и npm. Есть возможность использовать все подходы и библиотеки, что и для обычного React.
Огромное количество js пакетов из npm. Скорее всего, большая часть стандартных задач уже решена и возможно под MIT лицензией.
Большое комьюнити. Как индивидуальные разработчики так и крупные компании использовали RN для разработки, и продолжают использовать.
Много готовых наборов UI компонентов, таких как NativeBase, React Native Elements, библиотеки от крупных компаний типа Facebook, Airbnb, Wix.com.
Понятный инструментарий, обеспечивающий удобную разработку приложения от Hello World до Instagram.
Минусы:
Приложение стартует медленнее нативного и есть некоторые сложности дебага. JS код в дебаггере и без него работает на разных движках. Об этой проблеме очень хорошо написали Airbnb в серии статей, почему они отказались от React Native в разработке.
Так как инструментарий состоит из множества пакетов, которые разрабатываются отдельно, существует вероятность конфликта версий и разлома.
Не все можно сделать без нативного кода. И когда вносишь изменения в нативный код, то теряешь возможность использовать Expo и вынуждаешь себя собирать приложение стандартными средствами нативной разработки.
Большое спасибо Mirimon и HeaTTheatR за приглашение поучаствовать в этом эксперименте. Было увлекательно. На последок добавлю голосовалку.