Kuinka lisätä aloitusnäyttö reagoimaan alkuperäisenä (Android)

https://medium.com/@rocksinghajay

Edellisessä artikkelissani kirjoitin siitä, kuinka lisätä aloitusnäyttö natiivin (IOS) reagoimiseksi.

Nyt, tässä artikkelissa kerron teille, kuinka voimme lisätä splashin reagoimaan-natiivi (Android). Aion kertoa sinulle hyvin yksinkertaiset vaiheet. Ja tämä on hyvin alustava asia, jonka voimme luoda jokaiselle mobiilisovellukselle. Joten, se on erittäin tärkeä asia jokaiselle kehittäjälle, joka osaa lisätä sen oikealla tavalla.

Voit tarkastella koko lähdekoodia täältä:

Käytän yksinkertaista reagoida natiivi projekti lisätä splash screen siihen. Joten aloittakaa alustamalla reagoimaan natiiviprojekti järjestelmässäsi.

react-native init SplashScreenReactNative
cd SplashScreenReactNative

Kun olet suorittanut nämä kaksi linjaa terminaaliin, joudut reagoimaan alkuperäiseen projektiisi järjestelmässäsi.

Jos huomasit, että reagoivassa sovelluksessa on valkoinen tausta-näyttö. Tälle näytölle lisäämme mukautetun splash-näytömme. Kuinka huomata ensimmäinen valkoinen splash-näyttö, meidän on asetettava ensin tumma taustaväri sovellukseemme.

Korvaa App.js-komponentti alla olevalla koodilla

Sinun tarvitsee vain korvata taustaväri tummanpunaisella ja tekstivärillä valkoiseksi.

Lisää aloitusnäyttö Android-sovellukseen

Avaa projekti Android-studiossa ensin.

Kun olet avannut projektin Android studiossa, siirryt mipmap-kansioon, joka sijaitsee android / app / src / main / res-kansiossa ja jokaisella pikselitiheydellä on erilainen tiheys, joka on liitetty kansion nimeen, joka löytyy alla olevasta kuvakaappauksesta. .

Android / app / src / main / res

Ja tässä kuvassa kaikkien kuvien tulisi kulkea sen pikselitiheyden mipmap-kansion mukaan

Voit luoda kuvakkeen täällä Android Asset Studio, ja se antaa sinulle kaikki mipmap-kansion kuvat.

Ja kopioi kaikki kuvat sen mipmap-kansion mukaisesti.

icon.png

Seuraavassa vaiheessa luomme aloitusnäyttö, joka tulee näkyviin, kun sovellus käynnistyy ensimmäisen kerran.

  1. Luo background_splash.xml-tiedosto android / app / src / main / res / dravable -sovelluksessa, luomalla piirustuskansio ensin res-kansioon.

Ja seuraava koodi:

vedettävä / background_splash.xml

2. Seuraavaksi luomme colors.xml-tiedoston android / app / src / main / res / arvoihin, jotka määrittelemme punaisen värimme, joka on sama kuin punainen sovelluksessamme.

Ja seuraava koodi:

Android / app / src / main / RES / arvot / colors.xml

Avaa sitten style.xml-tiedosto androidissa / app / src / main / res / arvot / tyylit.xml ja lisää seuraava koodi:

3. Seuraavissa vaiheissa aiomme kertoa, että sovelluksemme käynnistää aluksi SplashTheme. Ja teemme sen AndroidManifest.xml-tiedostossa ja

Lisää seuraava koodi:

Ja muokata MainActivity olla seuraava. Lisää android: Export = "true" ja kommentoi

Ja viimeinen AndroidManifest.xml-tiedostomme näyttää seuraavalta:

4. Seuraavassa vaiheessa luomme SplashActivity.java-tiedoston kansioon android / app / src / main / Java / com / SplashActivity.java

SplashActivity.java

Suorita nyt sovelluksesi ja katso, kaikki toimii hyvin tai ei.

aloitusruutu

Ja se toimii hyvin, mutta lataamisen aloitusnäytön jälkeen on ongelma. Laite voidaan korjata lisäämällä reagoimaan-natiivi-splash-näyttö-moduuli reagoimaan natiivi sovellus.

lanka lisää [email protected]
reagoi-alkuperäinen linkki

Määritä sitten App.js sovelluksessasi.

Toivottavasti nautit tästä artikkelista aiheesta Kuinka lisätä aloitusnäyttö reagoidaksesi alkuperäiseen (ANDROID).

Napsauta tälle artikkelelle, jos pidät siitä hyödyllistä

Kommentoi ja pidä tätä artikkelia, jotta muut löytävät sen helposti Mediumista!

Hei, nimeni on Ajay Singh Rajput. Olen Fresttend-kehittäjä ZestGeekissä. Kirjoitan JavaScripistä ja reactjsista. Ja jakamalla maailmankatsomukseni kaikkien kanssa, liity pyrkimyksiini seuraamalla minua Twitterissä tai Mediumissa.

Haluatko lisätietoja JavaScriptistä, Reactjsista ja Lifestä? Tutustu muihin artikkeleihini:

Ja kiitos, että luit tämän artikkelin, jos pidät siitä, jaa se sitten ystävillesi ja vihollisillesi. Ja minä kirjoitan enemmän JavaScriptiä, react.js, ole yhteydessä minuun.