Как добавить значки приложений и заставки в React Native при создании и производстве

kak dobavit znachki prilozhenij i zastavki v react native pri

от Khoa Pham

aBPbP6-Ocvl4ZJliz8TXCLN9TxwaOr-U9qoq

React Native был разработан для того, чтобы «обучаться один раз, писать где угодно», и обычно используется для создания кроссплатформенных приложений для iOS и Android. И для каждой программы, которую мы создаем, иногда нам нужно повторно использовать тот же код, создать и немного настроить его, чтобы он работал в разных средах. Например, нам может понадобиться несколько скинов, тем, бесплатная и платная версия или чаще разные сценические и производственные среды.

И задача, которой мы не можем избежать, — это добавлять значки приложений и заставки в наши программы.

В самом деле, чтобы добавить сценическую и производственную среду, а также добавить значки приложений, нужно использовать Xcode и Android Studio, и мы делаем это так же, как с проектами нативной iOS или Android.

Давайте позвоним в наше приложение MyApp и загрузите его с помощью react-native init MyApp . Конечно, будет множество библиотек, которые помогут нам управлять разными средами.

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

Конфигурация сборки, цель, типы сборки, вкус производства и вариант сборки

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

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

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

В Android отладки и выпуски называются типами сборки, а подготовка и производство – типами продукта. Вместе они образуют варианты постройки.

Например, «демо» вкус продукта может указывать различные функции и требования к устройству, такие как пользовательский исходный код, ресурсы и минимальные уровни API, тогда как «настройка» тип конструкции применяет различные настройки сборки и упаковки, например, параметры настройки и ключи подписи. Полученный вариант сборки — это версия «demoDebug» вашего приложения, которая включает комбинацию конфигураций и ресурсов, включенных в «демонстрационный» продукт, типа «наладки» и main/ исходный набор.

Постановка и производственные цели в iOS

ОТКРЫТО MyApp.xcodeproj внутри ios с помощью Xcode. Вот что мы получаем после загрузки:

aT6TxJtPwQZYaQFQdx5RRnMfT18AHhveEHOW

React Native создает приложения для iOS и tvOS, а также две тестовые цели. В Xcode проект может содержать много целей, и каждая цель означает уникальный продукт со своими собственными настройками сборки – Info.plist и значками программы.

Дублированная цель

Если нам не нужна программа tvOS, мы можем удалить файл MyApp-tvOS и MyApp-tvOSTests . Давайте использовать MyApp цель, как наша производственная среда, и right click -> Duplicел, чтобы сделать другую мишень. Давай позвоним it MyApp Staging.

5hHjVB8EwYB5quzM26IUy9DufaCXNiRjp2N3

Каждая цель должна иметь уникальный идентификатор пакета. Измените идентификатор пакета MyApp к com.onmyway133.MyApp и MyApp Staging к com.onmyway133.MyApp.Staging.

g02pyEjScSy4RYD2BlxlqndP-czHtvanJ7K7

Info.plist

Когда мы дублируем MyApp target Xcode также дублирует Info.plist в MyApp copy-Info.plist для постановочной цели Смените его на более содержательное название Info-Staging.plist и перетащите его в MyApp группируйте в Xcode, чтобы оставаться организованными. После перетаскивания, MyApp Staging target не может найти plist, поэтому нажмите Choose Info.plist File и укажите на Info-Staging.plist.

sKyaTbgpYQfP7hRLus8TNqKb9tbsEwfqjHRU

Схема

Xcode также дублирует схему, когда мы дублируем цель, поэтому мы получаем MyApp copy:

ipNpPhA6cf4n6riHzYOv6L3rARKgZX78F4eb

Нажмите Manage Schemes в раскрывающемся меню схемы, чтобы открыть менеджер схем:

EwS7sAXkEYSz1dNAEDSAx5nXTtxgpdOrqW4W

Я обычно удаляю созданные MyApp copy схему, затем я снова создам новую схему для MyApp Staging цель. Вам нужно убедиться, что схема обозначена как Общая, чтобы она отслеживалась в git.

pubibFLRmRXA70peau6B-lCOTsezlSw7ph5E

Почему-то в постановочной схеме не все так, как в производственной схеме. Вы можете столкнуться с такими проблемами, как ‘React/RCTBundleURLProvider.h’ file not found или RN: ‘React/RCTBridgeModule.h’ file not found . Это потому, что React цель еще не связана.

Чтобы его решить, мы должны отключить Parallelise Build и добавить React цель и переместите ее выше MyApp Staging.

VhJq58o3EFkfP2OohZEOi2Mc6d2oDwcOdOE6

Разработка и изготовление продуктов в Android

Откройте android папку в Android Studio. По умолчанию существуют только типы отладки и выпуска:

LXNMq2Tdm4QFsoWCpw-SEgUkQsk9PsUOs0Od

Они настроены в app модуль build.gradle:

buildTypes {    release {        minifyEnabled enableProguardInReleaseBuilds        proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"    }}

Сначала изменим идентификатор программы на com.onmyway133.MyApp соответствовать iOS. Это не обязательно, но я думаю, что хорошо оставаться организованным. Затем создайте два варианта продукта для постановки и производства. Для постановки добавим .Staging к идентификатору программы.

С Android Studio 3 «теперь все ароматы должны относиться к названному измерению вкуса» — обычно нам нужны только размеры по умолчанию. Вот как это выглядит build.gradle для наших app модуль:

android {    compileSdkVersion rootProject.ext.compileSdkVersion    buildToolsVersion rootProject.ext.buildToolsVersion    flavorDimensions "default"
defaultConfig {        applicationId "com.onmyway133.MyApp"        minSdkVersion rootProject.ext.minSdkVersion        targetSdkVersion rootProject.ext.targetSdkVersion        versionCode 1        versionName "1.0"        ndk {            abiFilters "armeabi-v7a", "x86"        }    }    splits {        abi {            reset()            enable enableSeparateBuildPerCPUArchitecture            universalApk false  // If true, also generate a universal APK            include "armeabi-v7a", "x86"        }    }    buildTypes {        release {            minifyEnabled enableProguardInReleaseBuilds            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"        }    }
productFlavors {        staging {            applicationIdSuffix ".Staging"        }
        production {
        }    }}

Нажмите Sync Now чтобы позволить gradle выполнять работу синхронизации. После этого мы видим, что у нас есть четыре варианта сборки:

-nEATkMoAQykQ76AMDFzoYMzxU8DRidBmLm1

Как запустить постановку и производство

Чтобы запустить приложение для Android, мы можем указать такой вариант, как react-native run-android — variant=productionDebugно я предпочитаю зайти в Android Studio, выбрать вариант и запустить.

Чтобы запустить приложение iOS, мы можем указать схему, как react-native run-ios — simulator=’iPhone X’ — scheme=”MyApp Staging” . Как на react-native 0.57.0 это не работает. Но это неважно, поскольку я обычно захожу в Xcode, выбираю схему и запускаю.

Добавить значок программы для iOS

Согласно Инструкции по человеческому интерфейсу, нам нужны значки приложений разного размера для разных версий iOS, разрешения устройства и ситуаций (уведомления, настройки, Spring Board). Я создал инструмент под названием IconGenerator, ранее упоминавшийся в «Лучшие инструменты с открытым исходным кодом для разработчиков». Перетащите нужный значок — я предпочитаю 1024×1024 пикселей для значков приложений высокого разрешения — в Icon Generator MacOS.

8ptxiQkjwO8gYHh2l5hOQ7jalJ1vMjmLUgu2

Нажмите Generate и мы получаем AppIcon.appiconset . Это содержит значки приложений необходимых размеров, которые готовы к использованию в каталоге активов. Перетащите это в каталог активов в Xcode. То есть для производства.

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

IZniQguM52R2egi9K3Q2RiSwDZJh1MGoIwQS

Не забудьте установить фон так, чтобы мы не получили прозрачный фон. Для значка программы с прозрачным фоном iOS отображается черный фон, что выглядит ужасно.

После экспорта изображения перетащите значок промежутка в IconGenerator так же, как мы это делали раньше. Но на этот раз переименуйте созданный appiconset к AppIcon-Staging.appiconset. Затем перетащите это в каталог активов в Xcode.

Чтобы целевая установка использовала значки промежуточных программ, откройте MyApp Staging target и выбрать AppIcon-Staging как App Icon Source.

gTgyPbp9meNYC3hGR14NOXkODGUCAXZuVwsg

Добавить значок приложения для Android

XsdkrkclUz4Anzqe2rkViump5lmveYWNo02c

Мне нравится переключаться в режим просмотра проекта, поскольку легче изменять значки приложений. Нажмите res -> New -> Image Asset, чтобы открыть Asset Studio. Мы можем использовать те же значки приложений, которые использовали в iOS:

40-HvrVL2bCPt8sYJEh0yIvwTQO-Us1MEpX7

В Android 8.0 (уровень API 26) представлены адаптивные значки, поэтому нам нужно настроить ползунок «Изменить размер», чтобы убедиться, что значки наших приложений выглядят как можно лучше.

Android 8.0 (уровень API 26) представляет адаптивные значки запуска, которые могут отображать различные формы на разных моделях устройств. К примеру, значок адаптивной панели запуска может отображать круглую форму на одном OEM-устройстве и отображать кружок на другом устройстве. Каждый OEM-производитель придает маску, которую система затем использует для воспроизведения всех адаптивных иконок одинаковой формы. Значки адаптивной панели запуска также используются в ярлыках, приложении Настройки, диалоговых окнах общего доступа и на экране обзора. — Разработчики Android

Мы делаем сначала для производства, что означает main Res Directory. Этот шаг заменит существующие значки приложений-заполнителей, созданные Android Studio, когда мы загружали проекты React Native.

Ejg8cMXAsfFGELEFjuDrHpW8xiJjNjOKZCPI

Теперь, когда у нас есть значки рабочих программ, создайте иконки промежуточных программ. Android управляет кодом и активами по условиям. Нажмите на src -> New -> Dirекторий и крate a sпапка тегов. Внутри промежуточной программы создайте папку called res. Все, что мы делаемce in sтегирование заменит вклes in главный – это called source множества.

kwh1pi0dNor35pcf8sIVw1jSE8fhoNmFp9qu

Вы можете прочитать здесь: Создание с наборами исходных кодов.

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

src/demoDebug/ (набор источников вариантов создания)

src/debug/ (набор источников типа сборки)

src/demo/ (набор источника вкуса продукта)

src/main/ (основной набор источников)

Щелкните правой кнопкой мыши staging/res -> New -> Image Объект для создания иконок приложений для установки. Мы также используем те же значки приложений для размещения, что и в iOS, но на этот раз мы делаем этоhoose sтегирование как Res Directory. Таким образом, Android Studio знает, как генерировать different ic_laснимите и положите их into sтегирование.

ZDniqZf7J2-O9kGlNs4TCaK76wKrq5FWlLf4

Добавить экран запуска для iOS

Заставка называется экраном запуска в iOS, и это важно.

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

В старину нам нужно было использовать статические изображения запуска с разными размерами для каждого устройства и ориентации.

vpvYxIfUWBNeC5qLkHAZu8LnIxPnUD5oi8UE

Раскадровка экрана запуска

В настоящее время заказным способом является использование Launch Screen storyboard . Проект iOS от React Native поставляется вместе LaunchScreen.xib но xib это дело прошедшего. Давайте удалим его и создадим файл под названием Launch Screen.storyboard .

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

GeAUVDHsi4usmEM1WAOIYfNKCTfMdVnk6K9u
fET7YnCtOakmd6bxa9EINtjvBvWDLAfIZwnd

Набор изображений

Откройте каталог активов, щелкните правой кнопкой мыши и выберите New Image Set . Мы можем назвать это сколь угодно. Это будет использовано в Launch Screen.storyboard.

FOANVwAIPlu9Sw0xTw2DKDN-D9zFRhUrgJfo

Откройте Launch Screen.storyboard и добавьте файл UIImageView . Если используется Xcode 10, нажмите кнопку Библиотека в верхнем правом углу и выберите Show Objects Library.

ElDQfbXBrCnkgUv1bdTbFeSjp1FD531aCLKQ

Установите изображение для просмотра изображений и убедитесь Content Mode установлено на Aspect Filled, поскольку это гарантирует, что изображение всегда охватывает весь экран (хотя оно может быть обрезано). Затем подключите ImageView с помощью ограничений к Viewа не Safe Area. Вы делаете это с помощью Control+drag от просмотра изображения (всплеск) до View.

djyPzopJFIhBCgNmR8NTzajn6yhiwWq1QCZF

Ограничение без запаса

Нажмите на каждое ограничение и снимите флажок Relative to Margin. Благодаря этому наш ImageView закрепляется к краям просмотра без поля.

Ca4SGVE43ZoYt2vO9xzEhCEM5OwUtYmG9IhL

Теперь перейдите к обеим целям и выберите Launch Screen.storyboard как Launch Screen File:

tWdkNOVF8YocN9aSarVkKyTeqoLT8LkVquci

На iOS экран запуска часто кэшируется, поэтому вы, вероятно, не увидите изменений. Один из способов избежать этого – удалить программу и запустить ее снова.

Разместите тему запуска для Android

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

Поскольку существует много устройств Android с разными соотношениями и разрешением, если вы хотите показать заставку на весь экран, она, вероятно, не будет правильно масштабироваться для каждого устройства. Это только об UX.

Для заставки используем тему запуска splash_background.xml .

Узнайте о метрике устройства

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

7sCUEag7s1Bd6XQT5xUzl06wK0Fe8LMINn1f
W1QM52Nl-syNrLkP8DvrOtC3hc2pGVye2ZCK

Вот как добавить заставку за 4 простых шага:

Добавить всплеск изображения

Обычно нам нужна общая заставка как для постановки, так и производства. Перетащите изображение main/res/drawble . Кажется, у Android Studio есть проблемы с распознаванием некоторых изображений jpg для заставки, поэтому лучше выбрать изображение PNG.

Добавить splash_background.xml

Right click on drawable -> New -> Drawable resource файл. Назовите его как хотите — I choose splash_background.xml. Выберите корневой элементnt as layer-список:

ZpgiZzFrcfGgJ9z1PPdmrkrSU5CqIhEEeq1E
lCEe4-zJ4J3-xPuKXnG9TRbFqL1F0NpI8lxO

Список слоев означает Drawable, который управляет массивом других Drawables. Они рисуются в порядке массива, поэтому элемент с самым большим индексом рисуется сверху». Во как splash_background.xml выглядит как:

<?xml version="1.0" encoding="utf-8"?><!-- The android:opacity=”opaque” line — this is critical in preventing a flash of black as your theme transitions. --><layer-list xmlns:android="    android:opacity="opaque">    <!-- The background color, preferably the same as your normal theme -->    <item android:drawable="@android:color/white"/>    <!-- Your splash image -->    <item>        <bitmap            android:src="            android:gravity="center"/>    </item></layer-list>

Обратите внимание, что мы указываем на наше изображение-заставка, к которой мы добавили ранее android:src=”@drawable/iron_man”.

Объявить стиль

ОТКРЫТО styles.xml и добавить SplashTheme:

<style name="SplashTheme" parent="Theme.AppCompat.NoActionBar">    <item name="android:windowBackground">@drawable/splash_background</item></style>

Use SplashTheme

Идти в Manifest.xml и изменить тему активности программы запуска category android:name="android.intent.category.LAUNCHER" . Смените его на android:theme="@style/SplashTheme" . Для React Native активность запуска обычно является MainActivity . Во как Manifest.xml looks:

<manifest xmlns:android="    package="com.myapp">    <uses-permission android:name="android.permission.INTERNET" />    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>    <application      android:name=".MainApplication"      android:label="@string/app_name"      android:icon="@mipmap/ic_launcher"      android:allowBackup="false"      android:theme="@style/AppTheme">      <activity        android:name=".MainActivity"        android:label="@string/app_name"        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"        android:theme="@style/SplashTheme"        android:windowSoftInputMode="adjustResize">        <intent-filter>            <action android:name="android.intent.action.MAIN" />            <category android:name="android.intent.category.LAUNCHER" />        </intent-filter>      </activity>      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />    </application></manifest>

Запустите приложение сейчас, и вы увидите заставку, которая отображается, когда приложение запускается.

Управление конфигурациями среды

Различия между промежуточным и рабочим процессом связаны только с названиями приложений, идентификаторами приложений и значками приложений. Вероятно, мы используем различные ключи API и серверные URL для создания и производства.

На данный момент самой популярной библиотекой для обработки этих сценариев является react-native-config, которая, как говорится, приносит около 12 факторов любви к вашим мобильным приложениям. Чтобы начать, нужно выполнить много шагов, и я надеюсь, что есть менее многословное решение.

Куда уходить отсюда

В этой публикации мы коснулись Xcode и Android Studio больше, чем Visual Studio Code, но это было неизбежно. Надеюсь, этот пост был вам полезен. Вот еще несколько ссылок, чтобы узнать больше об этой теме:

Если вам нравится эта публикация, попробуйте посетить другие мои статьи и приложения?

Добавить комментарий

Ваш адрес email не будет опубликован.