React native android сборка

Publishing to Google Play Store

Android requires that all apps be digitally signed with a certificate before they can be installed. In order to distribute your Android application via Google Play store it needs to be signed with a release key that then needs to be used for all future updates. Since 2017 it is possible for Google Play to manage signing releases automatically thanks to App Signing by Google Play functionality. However, before your application binary is uploaded to Google Play it needs to be signed with an upload key. The Signing Your Applications page on Android Developers documentation describes the topic in detail. This guide covers the process in brief, as well as lists the steps required to package the JavaScript bundle.

Generating an upload key​

You can generate a private signing key using keytool . On Windows keytool must be run from C:\Program Files\Java\jdkx.x.x_x\bin .

This command prompts you for passwords for the keystore and key and for the Distinguished Name fields for your key. It then generates the keystore as a file called my-upload-key.keystore .

The keystore contains a single key, valid for 10000 days. The alias is a name that you will use later when signing your app, so remember to take note of the alias.

On Mac, if you’re not sure where your JDK bin folder is, then perform the following command to find it:

It will output the directory of the JDK, which will look something like this:

Navigate to that directory by using the command cd /your/jdk/path and use the keytool command with sudo permission as shown below.

Note: Remember to keep the keystore file private. In case you’ve lost upload key or it’s been compromised you should follow these instructions.

Setting up Gradle variables​

1. Place the my-upload-key.keystore file under the android/app directory in your project folder.
2. Edit the file

/.gradle/gradle.properties or android/gradle.properties , and add the following (replace ***** with the correct keystore password, alias and key password),

These are going to be global Gradle variables, which we can later use in our Gradle config to sign our app.

Note about using git: Saving the above Gradle variables in

/.gradle/gradle.properties instead of android/gradle.properties prevents them from being checked in to git. You may have to create the

/.gradle/gradle.properties file in your user’s home directory before you can add the variables.

Note about security: If you are not keen on storing your passwords in plaintext, and you are running macOS, you can also store your credentials in the Keychain Access app. Then you can skip the two last rows in

Adding signing config to your app’s Gradle config​

The last configuration step that needs to be done is to setup release builds to be signed using upload key. Edit the file android/app/build.gradle in your project folder, and add the signing config,

Generating the release AAB​

Run the following in a terminal:

Gradle’s bundleRelease will bundle all the JavaScript needed to run your app into the AAB (Android App Bundle). If you need to change the way the JavaScript bundle and/or drawable resources are bundled (e.g. if you changed the default file/folder names or the general structure of the project), have a look at android/app/build.gradle to see how you can update it to reflect these changes.

Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the app binary.

The generated AAB can be found under android/app/build/outputs/bundle/release/app.aab , and is ready to be uploaded to Google Play.

In order for Google Play to accept AAB format the App Signing by Google Play needs to be configured for your application on the Google Play Console. If you are updating an existing app that doesn’t use App Signing by Google Play, please check our migration section to learn how to perform that configuration change.

Testing the release build of your app​

Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using the following command in the project root:

Note that —variant release is only available if you’ve set up signing as described above.

You can terminate any running bundler instances, since all your framework and JavaScript code is bundled in the APK’s assets.

Publishing to other stores​

By default, the generated APK has the native code for both x86 and ARMv7a CPU architectures. This makes it easier to share APKs that run on almost all Android devices. However, this has the downside that there will be some unused native code on any device, leading to unnecessarily bigger APKs.

You can create an APK for each CPU by changing the following line in android/app/build.gradle:

Upload both these files to markets which support device targeting, such as Google Play and Amazon AppStore, and the users will automatically get the appropriate APK. If you want to upload to other markets, such as APKFiles, which do not support multiple APKs for a single app, change the following line as well to create the default universal APK with binaries for both CPUs.

Enabling Proguard to reduce the size of the APK (optional)​

Proguard is a tool that can slightly reduce the size of the APK. It does this by stripping parts of the React Native Java bytecode (and its dependencies) that your app is not using.

IMPORTANT: Make sure to thoroughly test your app if you’ve enabled Proguard. Proguard often requires configuration specific to each native library you’re using. See app/proguard-rules.pro .

To enable Proguard, edit android/app/build.gradle :

Migrating old Android React Native apps to use App Signing by Google Play​

If you are migrating from previous version of React Native chances are your app does not use App Signing by Google Play feature. We recommend you enable that in order to take advantage from things like automatic app splitting. In order to migrate from the old way of signing you need to start by generating new upload key and then replacing release signing config in android/app/build.gradle to use the upload key instead of the release one (see section about adding signing config to gradle). Once that’s done you should follow the instructions from Google Play Help website in order to send your original release key to Google Play.

Default Permissions​

By default, INTERNET permission is added to your Android app as pretty much all apps use it. SYSTEM_ALERT_WINDOW permission is added to your Android APK in debug mode but it will be removed in production.

Источник

Разработка приложений 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:

• В меню поиска Windows введите: «изменить системные переменные среды». Откроется окно Свойства системы.
• Выберите элемент Переменные среды и нажмите кнопку Создать в разделе Пользовательские переменные.
• Введите имя и значение переменной (путь). Ниже приведены пути по умолчанию для пакетов SDK для Java и Android. Если вы выбрали определенное расположение для установки пакетов SDK для Java и Android, обязательно обновите пути к переменной соответствующим образом.
  • JAVA_HOME: C:\Program Files\Android\Android Studio\jre\jre
  • ANDROID_HOME: C:\Users\имя_пользователя\AppData\Local\Android\Sdk

Установите 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 в командной строке могут возникнуть ошибки. Например «предупреждение: лицензия для пакета пакет SDK для Android Платформа 29 не принята». Чтобы устранить эту проблему, можно нажать кнопку Диспетчер пакетов SDK в Android Studio . Кроме того, вы можете перечислить и принять лицензии с помощью следующей команды, используя путь к расположению пакета SDK на компьютере.

Чтобы изменить приложение, откройте каталог проекта MyReactNativeApp в удобной для вас среде IDE. Мы рекомендуем использовать VS Code или Android Studio.

В шаблоне проекта, созданном с помощью react-native init , используется главная страница с именем App.js . На этой странице предоставляются полезные ссылки на материалы о разработке с помощью React Native. Добавьте некоторый текст в первый текстовый элемент, например строку «Hello World!», показанную ниже.

Перезагрузите приложение, чтобы отобразились внесенные изменения. Для этого существует несколько способов.

• В окне консоли средства увязки в пакеты Metro введите r.
• В эмуляторе устройства Android дважды коснитесь r на клавиатуре.
• Дважды встряхните физическое устройство Android, чтобы открыть меню отладки React Native, и выберите команду Reload (Перезагрузить).

Источник

Руководство по 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.

Источник