Додавання екрана запуску до додатку React Native на iOS та Android

Щоб опублікувати додаток React Native у магазинах, потрібно зробити більше, ніж просто його створити. Перед перевіркою необхідні іконки, описи та екран запуску, і саме на етапі екрана запуску вступає в силу нативний код. Наведені нижче кроки стосуються iOS та Android у їхніх платформових IDE з невеликою кількістю нативного коду. Інструкції базуються на версії react-native-splash-screen (випуск 3.0.6 та react-native link), тому новіші версії React Native можуть працювати з посиланнями інакше.

Проекти, створені за допомогою Expo або Create React Native App, не потребують усього цього, оскільки їхня власна документація описує екрани запуску за кілька рядків.

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

Дизайн ресурсів

У старіших підходах використовувалося одне велике зображення як екран запуску, яке погано масштабувалося при зміні роздільної здатності екранів. Кращий підхід передбачає використання простого квадратного зображення, схожого на іконку додатку, з двох причин.

1. Це створює враження, що іконка, на яку ви натиснули, збільшується та заповнює весь екран, що робить перехід більш плавним.
2. Це залишає все простим. Екран запуску має бути видимим лише кілька мілісекунд, тому він не повинен нести жодної інформації. Адже це екран завантаження.

Експортуйте квадратне зображення у трьох розмірах: 200 пкс для @1x, 400 пкс для @2x та 600 пкс для @3x.

Фон, який підкреслює миттєві зміни

Якщо ви вже пробували використовувати екран запуску в React Native, можливо, ви бачили біле спалахування перед тим, як з’явиться вміст. У додатку з білим фоном це важко помітити, але це все одно дратує. Щоб уникнути будь-яких спалахів, які можна пропустити, надайте демо-додатку темний фон: встановіть колір фону на #4F6D7A, колір тексту — на #F5FCFF, а також змініть статусну смугу на світлий текст, усе це у файлі App.js.

iOS

Відкрийте проект у Xcode:

open ios/SplashExample.xcodeproj

Спочатку додайте зображення як ресурс. У лівому навігаторі перейдіть до SplashExample, потім знову до SplashExample, далі до Images.xcassets, і натисніть кнопку „+” у другому стовпці навігатора. Позначте цей ресурс як SplashIcon. Додайте три зображення — Xcode автоматично призначить кожне з них відповідну щільність пікселів.

Далі у лівому навігаторі відкрийте LaunchScreen.xib. У ньому є два елементи тексту: назва проекту та напис „Powered by React Native“. Виберіть обидва та видаліть їх.

Встановіть фон для View. У другому навігаторі виберіть View, потім у правій панелі оберіть опцію Background, щоб відкрити вибірник кольорів. Є порада, яку іноді складно знайти: виберіть другу вкладку у вибірнику, потім „RGB Sliders“ — з’явиться поле для введення шістнадцяткового коду кольору. Введіть #4F6D7A.

Тепер додайте елемент Image View. Відкрийте бібліотеку об’єктів (третя іконка у правому нижньому куті панелі інструментів), знайдіть „image“ та перетягніть Image View на кольорову область View. У верхньо-правій панелі атрибутів виберіть SplashIcon як зображення. Встановіть режим вмісту на Aspect Fit, який знаходиться другим зверху в цій панелі, щоб пропорції залишалися правильними.

Щоб іконка залишалася центрованою на будь-якому пристрої, відкрийте вкладку лінійки (п’ята іконка у верхній частині правої панелі). У полі Autoresizing вимкніть зовнішні червоні лінії та увімкніть внутрішні червоні стрілки. Зображення залишатиметься центрованим незалежно від розміру екрана.

Це створює екран запуску, але біла вспышка все ще присутня.

Чому виникає вспышка

Коли додаток запускається, iOS відразу відображає екран запуску. Потім React Native потребує часу на завантаження: завантажується JavaScript та ініціалізується міст між ними. Протягом цього часу нативний екран запуску зникає, і ще нічого не відображається, тому ви бачите білий фон. Рішенням є зберігати екран запуску довше, ніж за замовчуванням, поки JavaScript не буде готовий. Для цього використовується пакет react-native-splash-screen.

Встановіть його та підключіть:

yarn add react-native-splash-screen@3.0.6
react-native link react-native-splash-screen

Далі налаштуйте сторону, написану на мові програмування самої платформи. У Xcode відкрийте файл AppDelegate.m, додайте імпорт заголовка пакета SplashScreen.h разом з іншими імпортами та викличте [SplashScreen show]; безпосередньо перед return YES; у функції didFinishLaunchingWithOptions.

У частині, написаній на JavaScript, повідомте екран запуску про необхідність зникнення, як тільки додаток буде готовий. Викличте метод приховування пакета з функції componentDidMount у файлі App.js.

Результат виглядає добре, залишається лише одна дрібна проблема: колір панелі статусу під час відображення екрана запуску. У файлі Info.plist додайте рядок із ключем UIStatusBarStyle та значенням у вигляді рядка UIStatusBarStyleLightContent. Після цього робота над частиною для iOS завершена.

Android

У Android ситуація трохи складніша, оскільки потрібні два окремі екрани запуску. Один належить до бібліотеки react-native-splash-screen, а інший відображається перед тим, як додаток створить свої елементи інтерфейсу.

Асети

Копіюйте зображення до папок mipmap, які знаходяться у директорії android/app/src/main/res. Android називає свої категорії щільності інакше, ніж iOS, тому файли потрібно прив’язати відповідно:

• У mipmap-mdpi зберігається зображення у масштабі 1x.
• У mipmap-hdpi — зображення у масштабі 2x.
• У mipmap-xhdpi — зображення у масштабі 3x.
• У mipmap-xxhdpi також зберігається зображення у масштабі 3x.

У кожній з цих папок перейменуйте файл на icon.png.

Екран запуску під час початкового запуску

Перший екран з’являється, коли додаток запускається з початкового стану. Цей підхід ґрунтується на відомій статті Big Nerd Ranch про правильне створення екранів запуску, яка детальніше пояснює логіку цього підходу.

1. Створіть файл background_splash.xml у каталозі android/app/src/main/res/drawable. Ймовірно, доведеться спочатку створити каталог drawable. У цьому файлі визначається layer-list — стек шарів. Перший шар заповнюється кольором фону (який буде визначений зараз), а другий відображає іконку розміром 200dp у ширину та висоту, розташовану по центру.
2. Створіть файл colors.xml у каталозі android/app/src/main/res/values та визначте кольори синього відтінку, той самий, який використовує додаток.

У файлі styles.xml у тій самій папці визначте SplashTheme. Він використовує background_splash як фон вікна та синій колір для панелі статусу, що максимально наближає його до справжнього додатку, включаючи зміну панелі статусу. Також переконайтеся, що колір панелі статусу за замовчуванням правильно налаштований.

У файлі AndroidManifest.xml змусьте додаток спочатку використовувати SplashTheme. Усередині тега <application> зареєструйте нову SplashActivity як запускач, а MainActivity налаштуйте так, щоб він більше не був елементом запуску. Зверніть увагу на параметр android:exported="true", який необхідно встановити там, де це потрібно, у новіших версіях Android.

Створіть файл SplashActivity.java. Його єдиною функцією є негайне перенаправлення на MainActivity — справжній додаток React Native.

Запустіть додаток, закрийте його, щоб наступний запуск був початком з нуля, а потім знову його відкрийте. Зображення на екрані з’являється миттєво, за ним слідує той самий білий спалах. Його виправлення вимагає трохи більше зусиль, ніж у iOS, але не набагато.

Утримування зображення на екрані до готовності JavaScript

Якщо його ще не встановлено, додайте пакет та підключіть його:

yarn add react-native-splash-screen@3.0.6
react-native link

Налаштуйте сторону Android, додавши виклик ініціалізації пакету у файлі MainActivity.java. У файлі App.js переконайтеся, що екран запуску закривається відразу після завантаження додатку, як у iOS.

Потім створіть файл launch_screen.xml у каталозі android/app/src/main/res/layout. Назва має значення, оскільки бібліотека її шукає. Використовуйте LinearLayout як кореневий елемент. У Android Studio є візуальний редактор, схожий на Interface Builder у Xcode, але тут простіше редагувати XML безпосередньо. Встановіть параметр gravity для макету як center, а фон — синім, залишивши все інше за замовчуванням. Усередині додайте ImageView, який відображатиме іконку.

Властивості ImageView:

• android:layout_width та android:layout_height визначають розмір, який збігається з тим, що використовується у файлі background_splash.xml.

android:layout_marginTop дорівнює висоті панелі статусу. Якщо його не вказувати, іконка розташуватиметься трохи інакше, ніж на першому екрані запуску, що при заміні одного екрана на інший спричинить помітний зсув.

android:src="@mipmap/icon" вказує на зображення.

Наостанок, у файлі colors.xml потрібен ще один запис:

<color name="primary_dark">#4F6D7A</color>

Якщо його пропустити, додаток завершує роботу під час запуску. Причиною є дефект у самому react-native-splash-screen, тому у наступних версіях цей елемент може стати зайвим.

Якщо обидва елементи на місці, додаток запускається з безперервним екраном запуску без мерехтіння як на iOS, так і на Android.