Kuidas lisada primaarset ekraani natiivse reageerimiseks (Android)

https://medium.com/@rocksinghajay

Oma eelmises artiklis kirjutasin sellest, kuidas lisada prindikuva, et reageerida natiivsele (IOS).

Nüüd, selles artiklis, ma ütlen teile, kuidas saame lisada läbilõiget natiivse reageerimise jaoks (Android). Ma ütlen teile väga lihtsaid samme. Ja see on väga algeline asi, mille saame luua iga mobiilirakenduse jaoks. Niisiis, see on iga arendaja jaoks väga oluline, et nad teaksid, kuidas seda õigesti lisada.

Kogu lähtekoodi saate vaadata siit:

Selle jaoks pritsmeekraani lisamiseks kasutan lihtsat reageerivat looduslikku projekti. Alustame siis reaalajas projekti initsialiseerimisega oma süsteemis.

reageeriva loomulik init SplashScreenReactNative
cd SplashScreenReactNative

Pärast nende kahe rea terminali käivitamist peate oma süsteemis reageerima loomuliku projektiga.

Kui märkasite, et reageerivas rakenduses on valge taustpritskuva. Sellele ekraanile lisame oma kohandatud pritsikuva. Kuidas märgata seda esimest valget läbilõiget, peame oma rakenduses esmalt seadma tumeda taustavärvi.

Asendage oma App.js komponent alloleva koodiga

Kõik, mida vajate, tuleb lihtsalt taustavärv asendada tumepunasega ja teksti värv valgeks.

Lisage pritskraan Androidi rakendusele

Esmalt avage oma projekt Android-stuudios.

Pärast projekti avamist Android-stuudios lähete siis mipmap-kausta, mis asub android / app / src / main / res-kaustas ja igal piksli tihedusel on erinev tihedus, mis on lisatud kausta nimele, mille leiate allolevast ekraanipildist .

android / app / src / main / res

Ja see on koht, kuhu kõik pildid peaksid minema vastavalt selle pikslitiheduse mipmap-kaustale

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

Saate oma ikooni luua siin Android Asset Studio ja see pakub teile kõiki mipmap-kausta pilte.

Ja kopeerige kõik pildid vastavalt oma kaustale.

icon.png

Järgmises etapis läheme ja loome pritsikuva, mis kuvatakse rakenduse esmakordsel käivitamisel.

  1. Faili background_splash.xml loomine androidis / rakenduses / src / main / res / drawing võib teil luua esmalt res kaustas joonistatava kausta.

Ja järgmine kood:

joonistatav / background_splash.xml

2. Järgmises loome väärtused android / app / src / main / res / väärtused colors.xml, mille abil määratleme meie punase värvi, mis on sama, mis meie rakenduses punane.

Ja järgmine kood:

android / rakendus / src / peamine / res / väärtused / värvid.xml

Seejärel avage failid stílus.xml androidis / rakenduses / src / main / res / väärtused / stiilid.xml ja lisage järgmine kood:

3. Järgmistes etappides räägime, et meie rakendus käivitab algul SplashTheme. Ja me teeme seda failis AndroidManifest.xml ja rakenduse sees

Lisage järgmine kood:

Ja muutke MainActivity järgmisteks. Lisage android: export = "true" ja kommenteerige kategooriat

Ja meie viimane AndroidManifest.xml-fail näeb välja järgmine:

4. Järgmises etapis loome SplashActivity.java faili kaustas android / app / src / main / Java / com / SplashActivity.java

SplashActivity.java

Nüüd käivitage rakendus ja vaadake, kas kõik töötab hästi või mitte.

pritsekraan

Ja see töötab hästi, kuid pärast laadimist ilmub probleem pärast pritsiekraani ilmumist, selle saab lahendada, lisades loomuliku rakenduse reageerimiseks mooduli react-native-splash-screen mooduli.

lõng lisada reagect-native-splash-screen@3.0.6
natiivne link

Seejärel konfigureerige oma rakenduses App.js.

Ma loodan, et teile meeldis see artikkel teemal Kuidas lisada prindiklaasi, et reageerida natiivsele versioonile (ANDROID).

Plaksutage selle artikli jaoks, kui leiate, et see on kasulik

Kommenteerige julgelt ja teile meeldib see artikkel, et teised leiaksid selle hõlpsalt meediumilt!

Tere, minu nimi on Ajay Singh Rajput. Olen ZestGeeki esisilla arendaja. Kirjutan JavaScripti ja reageeringute kohta. Ja mu maailmapildi jagamine kõigiga ühineb minu püüdlustega, jälgides mind Twitteris või meediumis.

Kas soovite lisateavet JavaScripti, Reactjsi ja Life'i kohta? Vaadake minu teisi artikleid:

Ja tänan teid selle artikli lugemise eest, kui teile see meeldib, siis jagage seda oma sõprade ja vaenlastega. Ja ma kirjutan rohkem JavaScripti kohta, react.js, hoidke minuga ühendust.