Kuinka toteuttaa tilkkanäyttö reaaliaikaisessa navigoinnissa

Reagoi alkuperäisnavigointi

Tämä opetusohjelma näyttää sinulle, kuinka aloitusruutu voidaan toteuttaa oikein reaaliaikaisessa navigoinnissa (RNN) sekä Androidilla että iOS: lla.

RNN: llä on sisäänrakennettu Splash Screen -tuki Android-alustalla, ja voimme käyttää ImageLaunchia iOS: lle. Siksi ei tarvita mitään muuta Splash Screen -kirjastoa.

Mielestäni on tärkeää tietää, miltä tulokset näyttävät, ennen kuin sijoitat kallista aikaa tämän oppaan lukemiseen. Katso:

Käytän generaattori-rn-työkalupakkia Android-sovellusten nopeasti jäsentämiseen ja iOS: n LaunchImage-sisältöön tässä esimerkissä. Sinun ei tarvitse käyttää tätä, jos et halua. Mutta jos teet niin, niin:

  • Asenna generator-rn-toolbox
  • Valmistele aloitusnäytön omaisuus / kuva (2208x2208 px) ja kopioi se projektihakemistoon. Tässä opetusohjelmassa resurssin nimi on splashscreen.psd

Android

Luo Android-omaisuus RN-työkalupakin avulla (valinnainen)

Suorita seuraava komento:

$ yo rn-työkalupakki: varat --splash splashscreen.psd --android

Kysyt nämä kysymykset:

  • Projektin nimi: Kirjoita projektin nimi tai kirjoita vain, jos ehdotettu nimi on oikea.
  • Korvaa tyylit.xml: Kirjoita ”n” (ei) ja kirjoita sitten.
  • Korvaa värit.xml: Kirjoita ”y” (kyllä) ja kirjoita sitten (kysy vain, onko värit.xml jo olemassa)

Skripti lisää / muuttaa seuraavaa:

  • Lisää nostettavissa olevia varoja nimellä launch_screen.png
  • Lisää piirrettävä nimi launch_screen_bitmap.xml. Käytämme tätä tiedostoa Splash Screen -asettelun taustakuvana
  • Lisää splashBackground-esine väreissä.xml, värikoodi on ensisijainen syöttöväri

Huomaa: Sinun on hylättävä kaikki style.xml-tiedoston muutokset, jos olet kirjoittanut sen vahingossa kirjoittaessasi skriptiä.

Tämä tekee yli 80% työstä. Siirry Android-ohjeen vaiheeseen 4.

Android-ohje (4 vaihetta)

Vaihe 1 (ohita, jos käytät työkaluruutua)
Kopioi ja korvaa oma sisältö hakemistoon / android / app / src / main / res /.

Vaihe 2 (ohita, jos käytät työkaluruutua)
Luo uusi asetustiedosto, jolla on alla oleva sisältö:

Huomautuksia:

  • Käytän käynnistysnäyttö_bitti-nimeä synkronoidaksesi työkalupakin käyttäjän kanssa. Voit käyttää tätä tiedostoa toisella nimellä, jos haluat.
  • Korvaa @ piirrettävä / käynnistä_näyttö omaisuutesi nimellä.

Vaihe 3

Luo / muokkaa väritiedostoasi aloitusnäytön taustavärillä. Tämä estää valkoisten välien käytön jollakin laitteella.

Huomaa: Varmista, että käytät heksavärikoodia oletusarvon mukaisen rgban sijasta (kiitos crankeye, joka huomautti tämän tässä numerossa).

Vaihe 4

Muokkaa MainActivity.java-sivua ohittamalla RNN: n createSplashLayout-menetelmä.

Se on kaikki vaiheet Androidille, mutta lopussa on bonusvaihe sekä Androidille että iOS-alustalle.

iOS

Luo Android-omaisuus RN-työkalupakin avulla (valinnainen)

Suorita seuraava komento:

$ yo rn-työkalupakki: varat --splash splashscreen.psd --ios

Kysyt nämä kysymykset:

  • Projektin nimi: Kirjoita projektin nimi tai kirjoita vain, jos ehdotettu nimi on oikea
  • Korvaa projekti.pbxproj: Kirjoita ”y” (kyllä) ja paina sitten Enter
  • Korvaa Info.plist: Kirjoita ”y” (kyllä) ja paina sitten enter-painiketta

Tämä lisää / muuttaa seuraavaa:

  • Luo uusi LaunchImage.launchimage-tiedosto, joka sisältää jäsennetyt varat
  • Poista UILaunchStoryboardName-avain ja sen arvo Info.plististä
  • Lisää ASSETCATALOG_COMPILER_LAUNCHIMAGE_NAME-määritykset sekä virheenkorjauksen että julkaisun rakennusasetuksiin

Tämä tekee kaikki työt. Sinun ei tarvitse tehdä mitään muuta.

iOS-ohje (3 vaihetta) - vain manuaalinen

Vaihe 1

Avaa Xcode-projektisi hakemistossa /ios/{you-project-name}.xcodeproj
Luo projekti kansiossasi uusi käynnistyskuva Images.xcassets -sovelluksessa
Lisää omaisuutesi tähän käynnistyskuvaan.

Käynnistä kuvaesimerkki

Vaihe 2

Poista oletusarvoinen reagoivan aloitusnäyttö poistamalla avain-arvoparit UILaunchStoryboardName Info.plististä

Vaihe 3

Käytä Käynnistä-kuva välilehden Yleiset -sovelluksessa> Sovelluskuvakkeet ja Käynnistä kuvat
Vaihda Launch Images Sourc äskettäin luotuun LaunchImage

LaunchImage -asetusesimerkki

Kaikki tämä iOS: lle, tarkista alla oleva bonusvaihe sekä Androidille että iOS: lle.

Bonusaskel

Lisää animationType: “haalistuminen”, kun käynnistät sovelluksen startTabBasedApp- tai startSingleScreenApp-sovelluksella, muutos näyttää sujuvammalta.

RN-työkalulaatikon huomautukset

  • Voisit suorittaa työkalupakin tuottaaksesi varoja sekä Androidille että iOS: lle kerralla määrittelemättä alustan lipua, mutta en suosittele, koska muutosten seuraaminen on vaikeampaa
  • Sinun ei tarvitse pitää splashscreen.psd-tiedostoa prosessin jälkeen
  • Luo omaisuus ei välttämättä toimi oikein kaikissa laiteulottuvuuksissa. On suositeltavaa korvata aloitusnäytön omaisuus suunnitteluryhmän resursseilla

Loppu

Tämä on ensimmäinen Medium-artikkelini, joten jos on virheitä tai ongelmia, jätä kommentti.

Tämän esimerkin lähdekoodi löytyy täältä. Voit tarkistaa sitoutumisen nähdäksesi kunkin ohjeen muutokset.

Toivon, että tämä opetusohjelma auttaa sinua ratkaisemaan kaikki ongelmat, joita sinulla on RNN Splash Screen -sovelluksen toteuttamisessa :)