Як додати піктограми додатків та заставки до екрану React Native під час постановки та виробництва

React Native був розроблений для того, щоб "вчитися один раз, писати де завгодно", і він зазвичай використовується для створення крос-платформних додатків для iOS та Android. І для кожного додатка, який ми створюємо, бувають випадки, коли нам потрібно повторно використовувати один і той же код, будувати та дещо налаштовувати його, щоб він працював для різних середовищ. Наприклад, нам може знадобитися декілька обкладинок, тем, безкоштовна та платна версія, або частіше різні постановочні та виробничі середовища.

І завдання, якого ми не можемо уникнути, - це додавання піктограм додатків та заставних екранів до наших додатків.

Насправді, щоб додати проміжне та виробниче середовище та додати піктограми додатків, нам потрібно використовувати Xcode та Android Studio, і ми робимо це так само, як це робимо з власними проектами iOS або Android.

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

У цій публікації ми будемо робити так само, як і з власними програмами, щоб знати основні кроки.

Конфігурація збірки, націлювання, типи збірки, виробничий смак та варіант збірки

Є кілька термінологій, які нам потрібно було пам’ятати. У iOS налагодження та випуски називаються конфігураціями збірки, а індексація та виробництво - цілями.

Конфігурація збірки задає набір налаштувань збірки, що використовуються для побудови цільового продукту певним чином. Наприклад, загальноприйнято мати окремі конфігурації збірки для налагодження та випуску збірок продукту. Ціль визначає продукт для збірки та містить інструкції щодо побудови продукту з набору файлів у проекті або робочому просторі. Ціль визначає окремий товар; він організовує вхідні дані в систему збірки - вихідні файли та інструкції щодо обробки цих вихідних файлів - необхідні для побудови цього продукту. Проекти можуть містити одну або декілька цілей, кожна з яких виробляє по одному продукту

В Android налагодження та випуски називаються типами збірки, а постановка та виробництво - ароматами продукту. Разом вони утворюють варіанти побудови.

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

Постановка та виробничі цілі в iOS

Відкрийте MyApp.xcodeprojвсередині iosза допомогою Xcode. Ось що ми отримуємо після завантаження:

React Native створює додатки для iOS та tvOS та дві тестові цілі. У Xcode проект може містити багато цілей, і кожна ціль означає унікальний продукт із власними налаштуваннями збірки - Info.plist та піктограмами програм.

Дублікат цілі

Якщо нам не потрібна програма tvOS, ми можемо видалити MyApp-tvOSі MyApp-tvOSTests. Давайте використаємо MyAppціль як наше виробниче середовище, і right click -> Duplicїли, щоб зробити іншу ціль. Назвемо it MyApp Stagінж.

Кожна ціль повинна мати унікальний ідентифікатор пакета. Змініть ідентифікатор набору MyAppна com.onmyway133.MyAppта MyApp Stagingна com.onmyway133.MyApp.Staging.

Info.plist

Коли ми дублюємо MyApp target, Xcode також дублюється Info.plistв MyApp copy-Info.plistдля проміжної цілі. Змініть його на більш значуще ім’я Info-Staging.plistта перетягніть до MyAppгрупи в Xcode, щоб залишитися організованим. Після перетягування MyApp Staging ціль не може знайти список, тому клацніть Choose Info.plist Fileі вкажіть на Info-Staging.plist.

Схема

Xcode також дублює схему, коли ми продублюємо ціль, тому отримуємо MyApp copy:

Клацніть Manage Schemesу спадному меню схеми, щоб відкрити менеджер схем:

Я зазвичай видаляю створену MyApp copyсхему, потім знову створюю нову схему для MyApp Stagingцілі. Потрібно переконатися, що схема позначена як Спільна, щоб вона відслідковувалась у git.

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

Щоб її вирішити, ми повинні відключити Parallelise Buildта додати Reactціль і перемістити її вище MyApp Staging.

Постановочні та виробничі аромати продукту в Android

Відкрийте androidпапку в Android Studio. За замовчуванням існують лише типи налагодження та випуску:

Вони налаштовані в 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 виконувати роботу синхронізації. Після цього ми можемо побачити, що у нас є чотири варіанти побудови:

Як запустити постановку та виробництво

Щоб запустити додаток для 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

According to the Human Interface Guideline, we need app icons of different sizes for different iOS versions, device resolutions, and situations (notification, settings, Spring Board). I’ve crafted a tool called IconGenerator, which was previously mentioned in Best Open Source Tools For Developers. Drag the icon that you want — I prefer those with 1024x1024 pixels for high resolution app icons — to the Icon Generator MacOS app.

Click Generate and we get AppIcon.appiconset . This contains app icons of the required sizes that are ready to be used in Asset Catalog. Drag this to Asset Catalog in Xcode. That is for production.

For staging, it’s good practice to add a “Staging” banner so that testers know which is staging, and which is production. We can easily do this in Sketch.

Remember to set a background, so we don’t get a transparent background. For an app icon with transparent background, iOS shows the background as black which looks horrible.

After exporting the image, drag the staging icon to the IconGenerator the same way we did earlier. But this time, rename the generated appiconset to AppIcon-Staging.appiconset. Then drag this to Asset Catalog in Xcode.

For the staging target to use staging app icons, open MyApp Staging target and choose AppIcon-Staging as App Icon Source.

Add app icon for Android

I like to switch to Project view, as it is easier to change app icons. Click res -> New -> Image Asset to open Asset Studio. We can use the same app icons that we used in iOS:

Android 8.0 (API level 26) introduced Adaptive Icons so we need to tweak the Resize slider to make sure our app icons look as nice as possible.

Android 8.0 (рівень API 26) представляє адаптивні піктограми панелі запуску, які можуть відображати різноманітні форми на різних моделях пристроїв. Наприклад, значок адаптивного пускового пристрою може відображати кругову форму на одному пристрої OEM, а на іншому пристрої - білку. Кожен OEM-пристрій забезпечує маску, яку система використовує для відображення всіх адаптивних піктограм однакової форми. Піктограми адаптивного панелі запуску також використовуються в ярликах, програмі Налаштування, діалогах спільного доступу та екрані огляду. - Розробники Android

Спочатку ми робимо для виробництва, що означає mainRes Directory. Цей крок замінить існуючі значки додатків-заповнювачів, створені Android Studio під час завантаження проектів React Native.

Now that we have production app icons, let’s make staging app icons. Android manages code and assets via convention. Click on src -> New -> Directory and create a staging folder. Inside staging, create a folder called res . Anything we place in staging will replace the ones in main — this is called source sets.

You can read more here: Build with source sets.

Ви можете використовувати каталоги набору джерел, щоб містити код та ресурси, які ви хочете упакувати, лише з певними конфігураціями. Наприклад, якщо ви будуєте «demoDebug» варіант збірки, який є векторним твором з «деми» аромату продукту і «налагодження» тип збірки, Gradle дивиться на цих каталогах, і дає їм такий пріоритет: src/demoDebug/(побудувати безліч джерел варіанту ) src/debug/(набір джерел типу збірки) src/demo/(набір джерел смаку продукту) src/main/(основний набір джерел)

Клацніть правою кнопкою миші на staging/res -> New -> ImageAsset, щоб створити піктограми додатків для постановки. Ми також використовуємо ті самі піктограми hoose sпроміжних програм, що і в iOS, але цього разу ми називаємо Res Directory. Таким чином Android Studio знає, як згенерувати erent ic_laрізницю та розмістити їх into s.

Додати екран запуску для iOS

Екран заставки називається екраном запуску в iOS, і це важливо.

Після запуску програми миттєво з’являється екран запуску. Екран запуску швидко замінюється першим екраном вашої програми, створюючи враження, що ваш додаток швидкий і чуйний

За старих часів нам потрібно було використовувати статичні зображення запуску з різними розмірами для кожного пристрою та орієнтації.

Запуск екрану розкадровки

Наразі рекомендованим способом є використання Launch Screen storyboard. Проект iOS від React Native поставляється, LaunchScreen.xibале xibце вже минуле. Давайте видалимо його і створимо файл із назвою Launch Screen.storyboard.

Клацніть правою кнопкою миші на MyAppпапці -> Створити та виберіть Запуск екрана, додайте його до обох цілей, як зазвичай ми показуємо однаковий екран заставки як для постановки, так і для виробництва.

Набір зображень

Відкрийте каталог активів, клацніть правою кнопкою миші та виберіть New Image Set. Ми можемо назвати це як завгодно. Це буде використано в Launch Screen.storyboard.

Open Launch Screen.storyboard and add an UIImageView . If you are using Xcode 10, click the Library button in the upper right corner and choose Show Objects Library.

Set image for Image View, and make sure Content Mode is set to Aspect Filled, as this ensures that the image always covers the full screen (although it may be cropped). Then connect ImageView using constraints to the View, not the Safe Area. You do this by Control+drag from the Image View (splash) to the View.

Constrains without margin

Click into each constraint and uncheck Relative to Margin. This makes our ImageView pin to the very edges of the view and with no margin at all.

Now go to both targets and select Launch Screen.storyboard as Launch Screen File:

On iOS, the launch screen is often cached, so you probably won’t see the changes. One way to avoid that is to delete the app and run it again.

Add a launcher theme for Android

There are several ways to add splash screen for Android, from using launcher themes, Splash Activity, and a timer. For me, a reasonable splash screen for Android should be a very minimal image.

As there are many Android devices with different ratios and resolutions, if you want to show a full screen splash image, it will probably not scale correctly for each device. This is just about UX.

For the splash screen, let’s use the launcher theme with splash_background.xml .

Learn about Device Metric

There is no single splash image that suits all Android devices. A more logical approach is to create multiple splash images for all common resolutions in portrait and landscape. Or we can design a minimal splash image that works. You can find more info here: Device Metric.

Here is how to add splash screen in 4 easy steps:

Add splash image

We usually need a common splash screen for both staging and production. Drag an image into main/res/drawble . Android Studio seems to have a problem with recognising some jpg images for the splash screen, so it’s best to choose png images.

Add splash_background.xml

Right click on drawable -> New -> Drawable resource file . Name it whatever you want — I choose splash_background.xml . Choose the root element as layer-list:

A Layer List means “a Drawable that manages an array of other Drawables. These are drawn in array order, so the element with the largest index is drawn on top”. Here is how splash_background.xml looks like:

Note that we point to our splash image we added earlier with android:src=”@drawable/iron_man”.

Declare style

Open styles.xml and add SplashTheme:

 @drawable/splash_background

Use SplashTheme

Go to Manifest.xml and change the theme of the the launcher activity, which has category android:name="android.intent.category.LAUNCHER" . Change it to android:theme="@style/SplashTheme" . For React Native, the launcher activity is usually MainActivity . Here is how Manifest.xml looks:

Run the app now and you should see the splash screen showing when the app starts.

Managing environment configurations

The differences between staging and production are just about app names, application ids, and app icons. We probably use different API keys, and backend URL for staging and production.

Right now the most popular library to handle these scenarios is react-native-config, which is said to “bring some 12 factor love to your mobile apps”. It requires lots of steps to get started, and I hope there is a less verbose solution.

Where to go from here

In this post, we touched Xcode and Android Studio more than Visual Studio Code, but this was inevitable. I hope this post was useful to you. Here are some more links to read more about this topic:

  • Add App Icons and Launch Screens to React Native Apps (iOS & Android)
  • How to Add a Splash Screen to a React Native App (iOS and Android)
  • Managing Configuration in React Native
  • Adding multiple target pipelines for React Native Apps (and Fastlane CircleCI deployment) pt. 1
  • The (Complete) Android Splash Screen Guide

If you like this post, consider visiting my other articles and apps ?