Com s'afegeix una pantalla d'inici per respondre de forma nativa (Android)

https://medium.com/@rocksinghajay

Al meu article anterior, vaig escriure sobre com afegir una pantalla inicial per respondre de forma nativa (iOS).

Ara, en aquest article, us explicaré com podem afegir un toc per tenir una resposta nativa (Android). Et diré passos molt senzills. I això és el primer que podem fer per a qualsevol aplicació mòbil. Això és molt important perquè qualsevol desenvolupador sàpiga afegir-lo correctament.

Podeu veure tot el codi font aquí:

Estic fent servir un projecte natiu reactiu senzill per afegir pantalla de presentació. Comenceu doncs, inicialitzant el projecte natiu reactiu al vostre sistema.

reag-native init SplashScreenReactNative cd SplashScreenReactNative

Després d’haver introduït aquestes dues línies al terminal, haureu de reaccionar al projecte natiu del vostre sistema.

Si heu notat que les aplicacions natives responen, tindreu una pantalla de presentació de fons blanc. En aquesta pantalla afegirem la nostra pantalla inicial personalitzada. Per notar aquesta primera pantalla de presentació blanca, primer hem d’establir un color de fons fosc a la nostra aplicació.

Substituïu el component App.js pel codi següent

Tot el que heu de fer és substituir el color de fons per vermell fosc i el de text per blanc.

Afegiu la pantalla inicial a l'aplicació d'Android

Primer, obriu el vostre projecte a Android Studio.

Després d'obrir el projecte a Android Studio, aneu a la carpeta mipmap, que es troba a la carpeta android / app / src / main / res. Cada densitat de píxels té una densitat diferent afegida al nom de la carpeta que podeu trobar a la captura de pantalla següent.

android / app / src / main / res

I aquest és el lloc on s’haurien de posar totes les imatges segons la densitat de píxels de la carpeta mipmap

Aquí podeu crear una icona per a Android Asset Studio que contingui totes les imatges de les carpetes mipmap.

I copieu totes les imatges segons la carpeta mipmap.

icon.png

Al següent pas, crearem la pantalla inicial que apareixerà la primera vegada que es llanci l'aplicació.

  1. Creeu un fitxer background_splash.xml a android / app / src / main / res / drawable. És possible que vulgueu crear primer una carpeta dibuixable a la carpeta res.

I el codi següent:

drawable / background_splash.xml

2. Al següent pas, creem un fitxer colors.xml a l’android / app / src / main / res / values ​​en què definim el nostre color vermell que correspon al color vermell de la nostra aplicació.

I el codi següent:

android / app / src / main / res / values ​​/ colors.xml

A continuació, obriu un fitxer styles.xml a android / app / src / main / res / values ​​/ styles.xml i afegiu el codi següent:

3. En els propers passos anunciarem que la nostra aplicació SplashTheme s’inicia per primera vegada. I ho farem al fitxer AndroidManifest.xml i dins fer

Afegiu el codi següent:

Canvieu MainActivity de la següent manera. Afegiu android: exported = "true" i descomenteu el fitxer

I el nostre fitxer final AndroidManifest.xml té aquest aspecte:

4. Al següent pas, crearem un fitxer SplashActivity.java a android / app / src / main / java / com / SplashActivity.java

SplashActivity.java

Ara executeu l'aplicació i vegeu si tot funciona o no.

Pantalla de benvinguda

I funciona bé, però hi ha un problema després de carregar la pantalla de presentació. Es pot corregir afegint un mòdul React Native Splash Screen per actuar sobre l’aplicació nativa.

Afegiu fil [email protected] enllaç vinculat a la reacció

A continuació, configureu App.js a la vostra aplicació.

Espero que us hagi agradat aquest article sobre l’addició d’una pantalla inicial per respondre des de Native (ANDROID).

Clap article per a aquest article si el trobeu útil

No dubteu a comentar i agrada aquest article perquè altres puguin trobar-lo fàcilment a Medium.

Hola, em dic Ajay Singh Rajput. Sóc desenvolupador frontal a ZestGeek. Escric a JavaScript i responc. I comparteix la meva visió del món amb tothom, segueix-me a Twitter o Medium.

Voleu obtenir més informació sobre JavaScript, Reactjs i Life? Consulteu els meus altres elements:

I gràcies per llegir aquest article, si us agrada, compartiu-lo amb els vostres amics i enemics. I escriuré més informació sobre JavaScript, react.js, mantingueu-me en contacte.