Cómo agregar una pantalla de inicio para reaccionar nativo (Android)

https://medium.com/@rocksinghajay

En mi artículo anterior, escribí sobre cómo agregar una pantalla de inicio para reaccionar nativo (IOS).

Ahora, en este artículo, te diré cómo podemos agregar un toque a react-native (Android). Te voy a decir pasos muy simples. Y esto es algo muy inicial que podemos crear para cada aplicación móvil. Entonces, eso es algo muy importante para todos los desarrolladores por saber cómo agregarlo de la manera correcta.

Puede ver el código fuente completo aquí:

Estoy usando un proyecto nativo reactivo simple para agregarle la pantalla de bienvenida. Entonces, comencemos inicializando el proyecto nativo reactivo en su sistema.

Reaccionar nativo init SplashScreenReactNative
cd SplashScreenReactNative

Después de ejecutar estas dos líneas en el terminal, deberá reaccionar al proyecto nativo en su sistema.

Si notó que la aplicación nativa de reacción tiene una pantalla de inicio de fondo blanco. En esa pantalla, estamos agregando nuestra pantalla de bienvenida personalizada. Cómo notar esa primera pantalla de bienvenida blanca, necesitamos establecer primero un color de fondo oscuro en nuestra aplicación.

Reemplace su componente App.js con el siguiente código

Todo lo que necesita es reemplazar el color de fondo con rojo oscuro y el color del texto con blanco.

Agregue la pantalla de bienvenida a la aplicación de Android

Abra su proyecto en el estudio de Android primero.

Después de abrir el proyecto en el estudio de Android, irá a la carpeta mipmap que se encuentra en la carpeta android / app / src / main / res y cada densidad de píxeles tiene una densidad diferente añadida al nombre de la carpeta que puede encontrar en la siguiente captura de pantalla .

android / app / src / main / res

Y este es el lugar donde todas las imágenes deben ir de acuerdo con su carpeta mipmap de densidad de píxeles

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

Puede crear su icono aquí Android Asset Studio y le proporcionará todas las imágenes de la carpeta mipmap.

Y copie todas las imágenes de acuerdo con su carpeta mipmap.

icon.png

En el siguiente paso, iremos y crearemos la pantalla de inicio que se muestra cuando se inicia la aplicación por primera vez.

  1. Cree un archivo background_splash.xml en android / app / src / main / res / drawable; es posible que primero se cree una carpeta dibujable en la carpeta res.

Y el siguiente código:

drawable / background_splash.xml

2. En el siguiente, crearemos un archivo colors.xml en android / app / src / main / res / values ​​que definiremos nuestro color rojo que es el mismo que el rojo en nuestra aplicación.

Y el siguiente código:

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

Luego abra un archivo styles.xml en android / app / src / main / res / values ​​/ styles.xml y agregue el siguiente código:

3. En los próximos pasos, vamos a decir que nuestra aplicación inicialmente inicia SplashTheme. Y lo haremos en el archivo AndroidManifest.xml y dentro de

Agregue el siguiente código:

Y modifique MainActivity para que sea el siguiente. Agregue android: exported = "true" y comente

Y nuestro archivo final AndroidManifest.xml tiene el siguiente aspecto:

4. En el siguiente paso, estamos creando un archivo SplashActivity.java en android / app / src / main / java / com / SplashActivity.java

SplashActivity.java

Ahora ejecute su aplicación y vea que todo funciona bien o no.

Pantalla de bienvenida

Y funciona bien, pero hay un problema después de que se produce una carga de la pantalla de inicio, se puede solucionar agregando un módulo de pantalla de inicio de reacción nativa para reaccionar a la aplicación nativa.

hilo agregar react-native-splash-screen@3.0.6
enlace reaccionar nativo

Luego configure App.js en su aplicación.

Espero que hayas disfrutado este artículo sobre Cómo agregar una pantalla de inicio para reaccionar nativo (ANDROID).

Aplauda para este artículo si lo encuentra útil

¡Siéntase libre de comentar y darle me gusta a este artículo para que otros puedan encontrarlo fácilmente en Medium!

Hola, mi nombre es Ajay Singh Rajput. Soy un desarrollador frontend en ZestGeek. Escribo sobre JavaScript y reactjs. Y compartiendo mi visión del mundo con todos, únete a mi búsqueda siguiéndome en Twitter o Medium.

¿Quieres aprender más sobre JavaScript, Reactjs y Life? Mira mis otros artículos:

Y gracias por leer este artículo si te gusta, compártelo con tus amigos y enemigos. Y escribiré más sobre JavaScript, react.js, mantente conectado conmigo.