Застаўка для праграмы на React Native на iOS і Android

Чыгуменне дапрацоўкі на React Native у магазіны праграмаў выклікае больш, чым проста яе стварэнне. Перад пераглядам трэбаецца іконкі, апісанні і экран запуску, і самэ ў гэтым моменты прыходзіць до вікорыстоўвання натыўнага коду. Наступныя крокі стосуюцца платформ iOS і Android у ўсіх іх інтэграцыйных срэдах, з невялікай кантралі натыўнага коду. Інструкцыі ўзятыя з перыоду 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“, і з’явіцца поле, дзе можна запісаць значэнне у фармаце hex. Уведзіце #4F6D7A.

Цяпер дадзіце адзін элемент «Image View». Ачыніце бібліятэку об’ектаў (трэцій іконкі на ніжнім правым канцы панелі інструментаў), ашукаце «image» і перацягніце элемент «Image 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 безпосерэдня. Установіце гравітасьянт лейаута на цэнтр і фон на сіній колер, а рэшту залішыце за значэнням падзеў. Унутры яго дадзіце 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.