Kuidas rakendada pritsikuva reaalajas navigeerimisel

Reaktiivne navigeerimine

See õpetus näitab teile, kuidas primaarset ekraani õigesti rakendada rakenduses React Native Navigation (RNN) nii Androidis kui ka iOS-is.

RNN-il on sisseehitatud Android-platvormil Splash Screen toetatud funktsioon ja iOS-i jaoks võiksime kasutada ImageLaunchi. Seetõttu pole vaja täiendavat Splash Screen teeki kasutada.

Ma arvan, et enne selle õppematerjali lugemiseks väärtusliku aja investeerimist on oluline teada, kuidas tulemused välja näevad. Vaata:

Selles näites kasutan Androidi varade kiireks parsimiseks generaatori-rn-tööriistakasti ja iOS-i jaoks LaunchImage. Kui te ei soovi, ei pea te seda kasutama. Aga kui teete, siis:

  • Installige generaator-rn-tööriistakast
  • Valmistage ette pritsikuva vara / pilt (2208x2208 px) ja kopeerige see projekti kataloogi. Selles õpetuses on vara nimi splashscreen.psd

Android

Genereerige Androidi vara, kasutades RN-tööriistakasti (valikuline)

Käivitage järgmine käsk:

$ yo rn-toolbox: varad - splash splashscreen.psd - android

Te küsite järgmisi küsimusi:

  • Projekti nimi: sisestage projekti nimi või sisestage lihtsalt siis, kui soovitatud on õige.
  • Stiilidexx ülekirjutamine: tippige „n” (ei) ja sisestage.
  • Värvide.xml ülekirjutamine: tippige „y“ (jah) ja sisestage siis (küsige ainult siis, kas värvid.xml on juba olemas)

Skript lisab / muudab järgmist:

  • Lisage lohistatavad varad nimega launch_screen.png
  • Lisage joonistatav nimi launch_screen_bitmap.xml. Me kasutame seda faili Splash Screen paigutuse taustpildina
  • Lisage üksus splashBackground üksuses värvid.xml, värvuskood on peamine sisestusvärv

Märkus. Kui laadite skripti käivitamisel selle kogemata üle kirjutades, peate failide stílus.xml muudatused ära jätma.

See teeb rohkem kui 80% tööst. Liikuge Androidi juhise 4. sammu juurde.

Androidi juhised (4 sammu)

1. samm (jätke vahele, kui kasutate tööriistakasti)
Kopeerige ja kirjutage üle oma vara kausta / android / app / src / main / res /.

2. samm (jätke vahele, kui kasutate tööriistakasti)
Looge järgmine paigutusfail järgmise sisuga:

Märkused:

  • Tööriistakasti kasutajaga sünkroonimiseks kasutan käivituskuva ekraani_bitkaardi nime. Soovi korral võite selle faili jaoks kasutada mõnda muud nime.
  • Asendage @ joonistatav / käivitatav ekraan oma vara nimega.

3. samm

Looge / muutke oma värvide faili pritskuva ekraani taustavärviga. See hoiab ära mõnes seadmes valgete vahed.

Märkus. Kasutage vaikimisi rgba asemel kuueteistkümmet värvikoodi (tänan väntamist, et juhtisite seda selles numbris).

4. samm

Muutke MainActivity.java, alistades RNN-i loodud meetodi createSplashLayout.

See on kõik sammud Androidi jaoks, kuid lõpus on nii Androidi kui ka iOS-i platvormi jaoks boonussamm.

iOS

Genereerige Androidi vara, kasutades RN-tööriistakasti (valikuline)

Käivitage järgmine käsk:

$ yo rn-tööriistakast: varad - splash splashscreen.psd --ios

Te küsite järgmisi küsimusi:

  • Projekti nimi: sisestage projekti nimi või sisestage lihtsalt siis, kui soovitatud on õige
  • Kirjutage projekt.pbxproj üle: tippige „y“ (jah) ja vajutage siis sisestusklahvi
  • Üle kirjutada Info.plist: tippige „y“ (jah) ja vajutage siis sisestusklahvi

See lisab / muudab järgmist:

  • Looge uus sõelutud fail LaunchImage.launchimage, mis sisaldab sõelutud varasid
  • Eemaldage UILaunchStoryboardName-võti ja selle väärtus saidist Info.plist
  • Lisage ASSETCATALOG_COMPILER_LAUNCHIMAGE_NAME konfiguratsioon nii silumise kui ka vabastamise ehituse sätetele

See teeb kõik tööd ära. Te ei pea midagi muud tegema.

iOS-i juhend (3 sammu) - ainult käsitsi

Samm 1

Avage oma Xcode-projekt kataloogis /ios/{you-project-name}.xcodeproj
Looge projekti kaustas oma uus kaustakujutis Images.xcassets
Lisage oma varad sellele käivituspildile.

Kujutise käivitamine

2. samm

Eemaldage vaikimisi käivitatud reaalaja kuva React, eemaldades teabe.plogis võtme-väärtuse paarid UILaunchStoryboardName

3. samm

Rakendage käivituspilt vahekaardil Üldine> Rakenduste ikoonid ja käivitage pildid
Valige Launch Images Sourc äsja loodud LaunchImage

LaunchImage seadistamise näide

See kehtib iOS-i jaoks. Kontrollige allolevat boonusetappi nii Androidi kui ka iOS-i jaoks.

Boonuse samm

Lisage animationType: kui rakendus käivitatakse rakendusega startTabBasedApp või startSingleScreenApp, muudab „fade” muutmise sujuvamaks.

RN-tööriistakasti märkused

  • Saate käivitada tööriistakasti varade genereerimiseks nii Androidi kui ka iOS-i jaoks korraga, kui platvormi lippu ei täpsustata, kuid ma ei soovita seda teha, kuna muudatuste jälgimine on raskem.
  • Pärast protsessi ei pea te splashscreen.psd-faili hoidma
  • Loodud varad ei pruugi kõigi seadmete mõõtmes õigesti töötada. Soovitatav on pritsekraani varad asendada disainimeeskonna ressurssidega

Lõpp

See on minu esimene artikkel keskmise kohta, nii et kui on vigu või probleeme, palun jätke kommentaar.

Selle näite lähtekoodi leiate siit. Iga juhise muudatuste nägemiseks võiksite kontrollida kohustust.

Loodan, et see õpetus aitab teil lahendada kõik probleemid, mis teil on RNN Splash Screeni rakendamisel :)