Как да добавите екран за пръскане към приложението React Native (iOS и Android)

Актуализирано: 27 февруари 2018 г.

Често ме питат за последната миля от разработването на приложението React Native (всъщност получаването му в магазина за приложения). Има нещо повече от това просто да създадете приложението си и да го изпратите на Apple / Google - трябва да добавите икони, екрани за пръскане, да напишете описания и други, преди да го изпратите за преглед.

Днес ще покрием екраните за пръскане на iOS и Android.

Използвате Expo или Create React Native App? Няма нужда да преминавате през всичко това - можете да следвате техните документи и да бъдете създадени за нула време.

В този урок ще работим в IDE на платформата и ще пишем малко нативния код. Не се притеснявайте, ще ви преведа през всичко. Крайният код е достъпен на Github.

Ще започна със създаването на ново приложение на React Native init SplashExample.

Против: Настройте контрола на източника, преди да следвате заедно! Това е не само добър начин за възстановяване на промените, когато направите грешка, но е и чудесен начин да видите точно какво се е променило, за да активирате екрана за пръскане.

Активи за пръскане на екрана

В предишна версия на този урок показах как просто да използвам голямо изображение за създаване на екрана за пръскане. Това може да има проблеми с мащабирането между непрекъснато нарастващия брой резолюции на екрана.

Така че вместо това ще започнем с едно изображение, което много прилича на нашата икона. Идеята тук е два пъти:

  1. Направете това да изглежда като иконата, която потребителят чуква, нараства, за да запълни целия екран, като направи безпроблемен преход.
  2. Не го усложнявай. Екранът за пръскане трябва да се показва само за няколко милисекунди. Не трябва да има много информация за него - в крайна сметка това е страховит екран за зареждане.

Имайки предвид всичко това, ще започнем с квадратно изображение в три размера (@ 1x = 200px, @ 2x = 400px, @ 3x = 600px).

Можете да получите тези изображения от Github.

Подготовка на приложението

Ако сте се опитали да настроите екран за пръскане в React Native, тогава може да изпитате бял екран, преди да се зареди съдържанието. Ако приложението ви има бял фон, това често не е много забележимо, но все още е болка. Днес ще направим това много забележимо, ако имаме светкавици от бяло. За целта ще зададем тъмен цвят на фона в нашето приложение.

Заменете App.js с

Всичко това беше зададено за фонов цвят на # 4F6D7A, цветът на текста на # F5FCFF и използване на лек текст в лентата на състоянието.

Основното приложение

Добавяне на екрани за пръскане (iOS)

Първо отворете проекта в Xcode.

отворете ios / SplashExample.xcodeproj

След това искаме да добавим нов актив на изображението в Xcode. Можете да получите достъп до това в левия навигатор - SplashExample> SplashExample> Imagex.xcassets и след това натиснете „+“ във втория ляв най-навигатор. Наречете го „SplashIcon“

Добавете активи на изображението

След това продължете напред и добавете трите изображения, които сте изтеглили по-рано. Те автоматично ще се прикрепят към правилната плътност на пикселите.

Активни изображения

След това можете да отворите LaunchScreen.xib, отново наличен в най-левия навигатор. Трябва да видите това.

LaunchScreen.xib

Изберете двата текстови елемента („SplashExample“ и „Powered by React Native“) и ги изтрийте.

След това ще зададем цвета на фона на изгледа. Изберете „View“ във втория ляв най-навигатор. След това в най-десния навигатор изберете “Background”, който ще изскача диалогов прозорец за избор.

Подбор на цвят на фона
Против: Отне ми завинаги да открия това, но ако изберете втората опция за избор на цвят и след това изберете „RGB плъзгачи“, тогава можете да въведете шестнадесетична стойност.
Съвет за избор на цвят

Продължете напред и задайте цвета на фона на # 4F6D7A.

След това искаме да добавим Image View към нашия екран за пръскане. Можете да откриете това, като натиснете третата опция в долното дясно меню и потърсите „изображение“. Когато го получите, го плъзнете върху синия изглед.

Изглед на изображение

След това искате да зададете източника на изображението горе вдясно. Когато изберете падащото изображение, всички изображения от Images.xcassets трябва да се показват - изберете SplashIcon.

Задайте изображение

Сега, за да фиксирате пропорциите, задайте „Съдържателен режим“ на „Аспект годни“. Това е достъпно в най-дясното меню, второто надолу.

Аспектна форма

След това трябва да се уверим, че иконата ни остава центрирана на екрана, независимо от това на какво устройство работи приложението. За да направите това, в най-десния навигатор изберете петата икона в горната част (тази, която прилича на линийка).

Владетел

В секцията „Автоматизиране“ ще искате да деактивирате външните червени линии и да активирате вътрешните червени стрелки. Това ще позволи на изображението да остане центрирано, независимо от размерите на екрана.

Autoresizing

Това ни оставя със следното:

Първоначален резултат

Сега да се справим с тази досадна светкавица с бял екран ...

Първо, защо се случва това? Точно тогава се зарежда Javascript и мостът се инициализира. Поне така си мисля. Екранът за пръскане се показва при първо зареждане на приложението (React Native). Тогава, докато React Native се инициализира, получаваме този бял екран, така че това, което трябва да направим, е „задръжте“ екрана за пръскане малко по-дълго от поведението по подразбиране.

Точно тук ще използваме екрана за реакция-нативен-пръскач.

Първо инсталирайте пакета и след това го свържете.

прежда добавете реактивна-splash-screen@3.0.6
react-native link react-native-splash-screen

След това трябва да конфигурираме пакета. От Xcode отворете файла AppDelegate.m.

След това ще добавим #import „SplashScreen.h“ с другия импорт и след това ще добавим [SplashScreen show]; малко над върнете ДА; в метода didFinishLaunchingWithOptions.

И накрая, в App.js трябва да кажем на екрана за пръскане да се скрие, след като нашето приложение е готово. Ще направим това в куката за жизнения цикъл на компонентаDidMount.

Woo! Изглежда добре. Един последен нитпик. Нека да зададем цвета на лентата на състоянието, когато светне екранът за пръскане. Отворете Info.plist в Xcode и добавете нов ред към него. Ключът трябва да бъде „UIStatusBarStyle“ и стойността (низ) към „UIStatusBarStyleLightContent“.

Задайте лентата на състоянието на бяло

И това ни оставя с съвършенство

iOS Perfection

Добавяне на екрани за пръскане (Android)

Android е докосване по-сложно от iOS, защото трябва да създадем два отделни екрана за пръскане. Единият се използва от реактивен-натиск-екран, а другият се използва преди приложението „надува“. Вероятно също е по-трудно, защото не съм толкова запознат с Android Studio.

Първата мисъл, която ще направим, е да добавим активите на изображения, които преди това сте изтеглили, в директории mipmap в проекта за android. Android се справя с различна плътност на пикселите, различна от iOS, така че ще трябва да направим някои модификации.

На първо място папките mipmap съществуват в android / app / src / main / res и всяка плътност на пикселите има различна плътност, добавена към името на директорията. Ето къде трябва да отидат изображенията

  • mipmap-mdpi = icon.png
  • mipmap-hdpi = icon@2x.png
  • mipmap-xhdpi = icon@3x.png
  • mipmap-xxhdpi = icon@3x.png

След като преименувате файловете, за да са вместо тях icon.png.

Android изображения

След това ще продължим и ще създадем екрана за пръскане, който се показва при първото стартиране на приложението от студен старт.

Тези инструкции са силно повлияни от това отлично ръководство от Big Nerd Ranch. Това обяснява защо стои зад това, което правим.

Първо създайте файл background_splash.xml в android / app / src / main / res / dravable (вероятно ще трябва да създадете директорията за изтегляне).

Добавете следния код:

Background_splash.xml

Това, което правим тук, е да настроим списък със слоеве (списък със слоеве), след това да зададем цвят на фона (който ще дефинираме скоро) и накрая да направим нашата икона. Иконата ще бъде висока 200 dp, широка и центрирана в екрана.

След това ще създадем color.xml в android / app / src / main / res / стойности, в които ще определим синия си цвят (който е същият като синия в нашето приложение).

След това създаваме нов SplashTheme във файла android / app / src / main / res / values ​​/ styles.xml.

Ние му казваме да използва background_splash, който току-що дефинирахме като фон на прозореца и също така му казваме да използва синия цвят за лентата на състоянието. Опитвам се да подражавам на действителното приложение колкото е възможно повече, като по този начин се променя лентата на състоянието.

Докато сме тук, нека да продължим напред и да гарантираме, че StatusBar по подразбиране на основната ни тема на приложение също е по подразбиране към правилния цвят. Това ни оставя със стил.xml от:

Сега трябва да кажем на нашето приложение да използва SplashTheme първоначално. Ще направим това в AndroidManifest.xml. Вътре в <приложение> добавяне

И модифицирайте MainActivity, за да бъде следното. Обърнете специално внимание на андроида: Exported = "вярно", което добавих.

Това ме оставя с AndroidManifest.xml, който изглежда така

Сега трябва да създадем файл SplashActivity.java.

SplashActivity.java

Целта на този SplashActivity.java е да препрати към нашата MainActivity (приложението React Native). Трябва да изглежда така

Сега, ако приемем, че всичко е настроено правилно, ако стартирате приложението, след това го затворете (така че трябва да направи студен старт), трябва да видите следното.

Стартиране на студен старт

Изглежда доста добре! Получаваме веднага екрана за стартиране, но след това отново получаваме тази бяла светкавица…

Поправянето му не е толкова лесно в iOS, но все пак не е твърде трудно.

Ако още не сте го инсталирали, реагирайте на натискане на екрана и го свържете.

прежда добавете реактивна-splash-screen@3.0.6
реакция-родна връзка

След това трябва да конфигурираме нативната страна на Android.

В MainActivity.java добавете

След това конфигурирайте App.js в приложението си, ако не сте го направили, за да затворите екрана за пръскане веднага щом приложението се зареди.

Тогава ще искате да създадете start_screen.xml (име има значение!) Вътре в android / app / src / main / res / layout с корен елемент на LinearLayout.

Нов файл на оформлениетоСъздавайте с LinearLayout

Android Studio има интерфейс, много подобен на създателя на интерфейс на Xcode, но не съм сигурен как работи, просто ще модифицирам елементите директно.

Първо ще настроя гравитацията на LinearLayout в центъра, а цветът на фона - син. Останалото е настройка по подразбиране.

След това ще направя ImageView, за да изобразя иконата вътре в LinearLayout.

За свойствата на ImageView.

  • android: layout_width, android: layout_height - задайте височина и ширина. Искаме да е същото като това, което сме задали в background_splash.xml.
  • android: layout_marginTop - това е височината на лентата на състоянието. Ако пропуснем това, иконите няма да са съвсем на едно и също място и ще видите "скок", когато екраните за пръскане се превключат
  • android: src = "@ mipmap / icon" изображение за рендериране

И накрая, вътре във файла color.xml трябва да добавим:

 # 4F6D7A 

В противен случай приложението ще се срине. Това е грешка в екрана на реакция-нативен и може да бъде отстранен в бъдеща версия.

Android Успех!

Надявам се да сте намерили това полезно!

Благодаря, че прочетохте този урок! Казвам се Спенсър Карли - Прекарах последните години в учене и изграждане с React Native. Ежеседмично изпращам имейл със съвети, трикове и уроци за създаване на приложения на React Native и също така подготвям шест премиум обучителни курсове, за да ви помогнем да изградите по-добри React Native приложения по-бързо.
Искате ли да поговорите за създаването на страхотни приложения React Native? Достигни до мен!