Kako dodati ikone i početne ekrane u React Native aplikaciju u postavljanju i produkciji

Programiranje

React Native dizajniran je za "naučite jednom, pišite bilo gdje" i obično se koristi za izradu aplikacija na više platformi za iOS i Android. I za svaku aplikaciju koju gradimo, ponekad treba ponovno koristiti isti kôd, izgraditi ga i malo prilagoditi kako bi funkcionirao u različitim okruženjima. Na primjer, možda će nam trebati višestruka obloga, teme, besplatna i plaćena verzija ili češće različita scenska i produkcijska okruženja.

A zadatak koji ne možemo izbjeći je dodavanje ikona aplikacija i početnih zaslona u naše aplikacije.

Zapravo, da bismo dodali scensko i produkcijsko okruženje i dodali ikone aplikacija, potrebno je da koristimo Xcode i Android Studio, a činimo to na isti način kao i s izvornim iOS ili Android projektima.

Nazovimo našu aplikaciju MyAppi pokrenimo je pomoću react-native init MyApp. Bit će, naravno, mnoštvo knjižnica koje će nam pomoći u upravljanju različitim okruženjima.

U ovom ćemo postu učiniti baš kao što smo to radili s izvornim aplikacijama, kako bismo znali osnovne korake.

Konfiguracija gradnje, ciljanje, tipovi građe, proizvodni okus i varijanta građe

Postoje neke terminologije koje smo se trebali sjetiti. U iOS-u se otklanjanje pogrešaka i izdanja nazivaju konfiguracijama gradnje, a postavljanje i izrada ciljevi.

Konfiguracija gradnje određuje skup postavki gradnje koja se koristi za izgradnju ciljanog proizvoda na određeni način. Na primjer, uobičajeno je imati zasebne konfiguracije gradnje za otklanjanje pogrešaka i izdavanje gradnji proizvoda. Cilj određuje proizvod za izradu i sadrži upute za izgradnju proizvoda iz skupa datoteka u projektu ili radnom prostoru. Cilj definira jedan proizvod; organizira ulaze u sustav gradnje - izvorne datoteke i upute za obradu tih izvornih datoteka - potrebne za izgradnju tog proizvoda. Projekti mogu sadržavati jedan ili više ciljeva, od kojih svaki proizvodi jedan proizvod

U Androidu se otklanjanje pogrešaka i izdanja nazivaju vrstama izrade, a postavljanje i proizvodnja nazivi su okusima proizvoda. Zajedno čine varijante gradnje.

Na primjer, "demo" okus proizvoda može odrediti različite značajke i zahtjeve uređaja, poput prilagođenog izvornog koda, resursa i minimalne razine API-ja, dok vrsta gradnje "otklanjanje pogrešaka" primjenjuje različite postavke izrade i pakiranja, poput mogućnosti otklanjanja pogrešaka i potpisivanja tipke. Rezultirajuća inačica izrade verzija je "demoDebug" vaše aplikacije i uključuje kombinaciju konfiguracija i resursa uključenih u "demo" okus proizvoda, vrstu izrade "otklanjanje pogrešaka" i main/skup izvora.

Ciljevi postavljanja i produkcije u iOS-u

Otvorite MyApp.xcodeprojiznutra iospomoću Xcodea. Evo što dobivamo nakon bootstrappinga:

React Native stvara iOS i tvOS aplikacije i dva testna cilja. U Xcodeu projekt može sadržavati mnogo ciljeva, a svaki cilj znači jedinstveni proizvod sa svojim postavkama izrade - Info.plist i ikonama aplikacija.

Duplicirani cilj

Ako nam ne treba aplikacija tvOS, možemo izbrisati MyApp-tvOSi MyApp-tvOSTests. Upotrijebimo MyAppcilj kao svoje proizvodno okruženje, a right click -> Duplicjeli smo da bismo napravili još jedan cilj. Nazovimo it MyApp Staging.

Svaka meta mora imati jedinstveni ID paketa. Promijenite ID paketa MyAppu com.onmyway133.MyAppi MyApp Stagingu com.onmyway133.MyApp.Staging.

Info.plist

Kada smo udvostručiti MyApp target, Xcode i duplikata Info.plistu MyApp copy-Info.plistza cilj staging. Promijenite ga u smislenije ime Info-Staging.plisti povucite u MyAppgrupu u Xcodeu da biste ostali organizirani. Nakon povlačenja, MyApp Staging cilj ne može pronaći popis, pa kliknite Choose Info.plist Filei pokažite na Info-Staging.plist.

Shema

Xcode također duplicira shemu kada dupliciramo cilj, pa dobivamo MyApp copy:

Kliknite Manage Schemespadajući izbornik sheme da biste otvorili upravitelja shemama:

Obično brišem generiranu MyApp copyshemu, a zatim ponovno kreiram novu shemu za MyApp Stagingcilj. Morate biti sigurni da je shema označena kao Shared kako bi se pratila u git.

Iz nekog razloga, inscenacijska shema nema sve stvari postavljene poput proizvodne sheme. Možete naići na probleme poput ‘React/RCTBundleURLProvider.h’ file not foundili RN: ‘React/RCTBridgeModule.h’ file not found. To je zato što Reactcilj još nije povezan.

Da bismo ga riješili, moramo onemogućiti Parallelise Buildi dodati Reactcilj te ga premjestiti iznad MyApp Staging.

Pokusni i proizvodni okusi proizvoda u Androidu

Otvorite androidmapu u Android Studiju. Prema zadanim postavkama postoje samo vrste izrade za uklanjanje pogrešaka i izdanja:

Konfigurirani su u appmodulu build.gradle:

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

Prvo promijenimo ID aplikacije com.onmyway133.MyAppda odgovara iOS-u. Nije obavezno, ali mislim da je dobro ostati organiziran. Zatim stvorite dva okusa proizvoda za inscenaciju i proizvodnju. Za uprizorenje dodajmo .StagingID aplikacije.

Iz Android Studija 3, "svi okusi sada moraju pripadati imenovanoj dimenziji okusa" - obično nam trebaju samo zadane dimenzije. Evo kako izgleda build.gradleza naš appmodul:

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 {
 } }}

Kliknite Sync Nowda gradle obavi posao sinkronizacije. Nakon toga možemo vidjeti da imamo četiri varijante izrade:

Kako pokrenuti inscenaciju i produkciju

Da bismo pokrenuli Android aplikaciju, možemo odrediti varijantu poput react-native run-android — variant=productionDebug, ali radije idem u Android Studio, odaberite varijantu i pokrenite.

Da bismo pokrenuli iOS aplikaciju, možemo odrediti shemu poput react-native run-ios — simulator=’iPhone X’ — scheme=”MyApp Staging”. Kao react-native 0.57.0ovo ne radi. Ali nije važno jer obično idem na Xcode, odaberem shemu i trčim.

Dodaj ikonu aplikacije za iOS

Prema Smjernici za ljudsko sučelje, trebamo ikone aplikacija različitih veličina za različite verzije iOS-a, razlučivosti uređaja i situacije (obavijest, postavke, Spring Board). Izradio sam alat pod nazivom IconGenerator, koji je prethodno spomenut u Best Open Source Tools for Developers. Povucite ikonu koju želite - više volim one s 1024x1024 piksela za ikone aplikacija visoke razlučivosti - u aplikaciju Generator ikona MacOS.

Kliknite Generatei dobit ćemo AppIcon.appiconset. Sadrži ikone aplikacija potrebnih veličina koje su spremne za upotrebu u Katalogu imovine. Povucite ovo u Katalog imovine u Xcodeu. To je za proizvodnju.

Za inscenaciju je dobra praksa dodati natpis "Staging" kako bi testeri znali što je inscenacija, a što produkcija. To možemo lako učiniti u programu Skica.

Ne zaboravite postaviti pozadinu kako ne bismo dobili prozirnu pozadinu. Za ikonu aplikacije s prozirnom pozadinom iOS prikazuje pozadinu kao crnu što izgleda užasno.

Nakon izvoza slike, povucite ikonu za postavljanje u IconGenerator na isti način kao i ranije. Ali ovaj put preimenujte generirano appiconsetu AppIcon-Staging.appiconset. Zatim povucite ovo u Katalog imovine u Xcodeu.

Da bi cilj postavljanja koristio ikone aplikacija za postavljanje, otvorite MyApp Staging targeti odaberite AppIcon-Stagingkao App Icon Source.

Dodaj ikonu aplikacije za Android

Volim se prebaciti na prikaz projekta, jer je lakše mijenjati ikone aplikacija. Pritisnite res -> New -> ImageAsset da biste otvorili Asset Studio. Možemo koristiti iste ikone aplikacija koje smo koristili u iOS-u:

Android 8.0 (API razina 26) predstavio je prilagodljive ikone pa moramo prilagoditi klizač za promjenu veličine kako bi ikone aplikacija izgledale što ljepše.

Android 8.0 (API razina 26) uvodi prilagodljive ikone pokretača koji mogu prikazati razne oblike na različitim modelima uređaja. Na primjer, prilagodljiva ikona pokretača može prikazati kružni oblik na jednom OEM uređaju, a na drugom uređaju vjevericu. Svaki OEM uređaj nudi masku, koju sustav zatim koristi za prikazivanje svih prilagodljivih ikona u istom obliku. Ikone prilagodljivog pokretača također se koriste u prečacima, aplikaciji Postavke, dijaloškim okvirima za dijeljenje i zaslonu pregleda. - Android programeri

Prvo radimo na proizvodnji, što znači mainRes Directory. Ovaj će korak zamijeniti postojeće ikone rezerviranih mjesta koje je generirao Android Studio prilikom pokretanja React Native projekata.

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.

Možete koristiti direktorije skupova izvora da sadrže kôd i resurse koje želite pakirati samo s određenim konfiguracijama. Na primjer, ako gradite varijantu gradnje "demoDebug", koja je križni proizvod "demo" okusa proizvoda i "debug" vrste gradnje, Gradle pregledava ove direktorije i daje im sljedeći prioritet: src/demoDebug/ (izvor varijante gradnje ) src/debug/ (set izvora izvora gradnje) src/demo/ (set izvora okusa proizvoda) src/main/ (glavni izvorni set)

Desnom tipkom miša kliknite staging/res -> New -> ImageAsset da biste napravili ikone aplikacija za inscenaciju. Također koristimo iste ikone aplikacija za postavljanje kao u iOS-u, ali ovaj put hoose soznačavamo kao Res Directory. Na ovaj način Android Studio zna kako generirati diff erent ic_launcher i staviti ih na into soznačavanje.

Dodajte zaslon za pokretanje za iOS

Početni zaslon u iOS-u se naziva Launch Screen (Pokreni zaslon) i to je važno.

Zaslon za pokretanje pojavljuje se odmah kad se aplikacija pokrene. Zaslon za pokretanje brzo se zamjenjuje prvim zaslonom vaše aplikacije, što daje dojam da je vaša aplikacija brza i brza

U stara vremena morali smo koristiti statične slike za pokretanje različitih veličina za svaki uređaj i orijentaciju.

Pokreni zaslon ploča s prikazima

Za sada je preporučeni način upotrebe Launch Screen storyboard. IOS projekt React Native dolazi, LaunchScreen.xibali xibje stvar prošlosti. Izbrišimo je i stvorimo datoteku koja se zove Launch Screen.storyboard.

Desni klik na MyAppmapu -> Novo i izabrao Pokreni zaslon, dodajte ga na obje mete, jer obično prikazujemo isti početni zaslon i za inscenaciju i za produkciju.

Slika postavljena

Open asset catalog, right click and select New Image Set . We can name it anything. This will be used in the 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 ?