Cómo implementar Splash Screen en React Native Navigation

Reaccionar navegación nativa

Este tutorial le mostrará cómo implementar correctamente la pantalla de inicio en React Native Navigation (RNN) tanto en Android como en iOS.

RNN tiene un soporte incorporado para Splash Screen en la plataforma Android, y podríamos usar ImageLaunch para iOS. Por lo tanto, no es necesario usar ninguna biblioteca adicional de pantalla de bienvenida.

Creo que es importante saber cómo se verán los resultados antes de invertir su valioso tiempo leyendo este tutorial. Echar un vistazo:

Usaré generator-rn-toolbox para analizar rápidamente los activos para Android y LaunchImage para iOS en este ejemplo. No tiene que usar esto si no lo desea. Pero si lo haces, entonces:

  • Instalar generador-rn-caja de herramientas
  • Prepare el activo / imagen de la pantalla de inicio (2208x2208 px) y cópielo en el directorio del proyecto. En este tutorial, el nombre del activo es splashscreen.psd

Androide

Generar activos de Android usando RN-Toolbox (Opcional)

Ejecute el siguiente comando:

$ yo rn-toolbox: assets --splash splashscreen.psd --android

Hará estas preguntas:

  • Nombre del proyecto: escriba el nombre de su proyecto o simplemente ingrese si la sugerencia es correcta.
  • Sobrescribir styles.xml: escriba "n" (no) y luego ingrese.
  • Sobrescribir colors.xml: escriba "y" (sí) y luego ingrese (solo pregunte si ya existe colors.xml)

El script agregará / modificará lo siguiente:

  • Agregue recursos dibujables con el nombre launch_screen.png
  • Agregue un nombre dibujable launch_screen_bitmap.xml. Utilizaremos este archivo como imagen de fondo del diseño de la pantalla de bienvenida
  • Agregue un elemento splashBackground en colors.xml, el código de color será el color de entrada principal

Nota: debe descartar cualquier cambio en el archivo styles.xml si accidentalmente lo sobrescribe al ejecutar el script.

Esto hará más del 80% del trabajo. Vaya al Paso 4 de las instrucciones de Android.

Instrucción de Android (4 pasos)

Paso 1 (Omita si usa la caja de herramientas)
Copie y sobrescriba sus propios activos en / android / app / src / main / res /.

Paso 2 (Omita si usa la caja de herramientas)
Cree un nuevo archivo de diseño con el siguiente contenido:

Notas:

  • Uso el nombre launch_screen_bitmap para sincronizar con el usuario de la caja de herramientas. Puede usar otro nombre para este archivo si lo desea.
  • Reemplace @ drawable / launch_screen con el nombre de su activo.

Paso 3

Cree / modifique su archivo de colores con el color de fondo de su pantalla de bienvenida. Esto evitará el espacio blanco en algunos dispositivos.

Nota: Asegúrese de usar un código de color hexadecimal en lugar de la rgba predeterminada (Gracias a crankeye por señalar esto en este problema).

Paso 4

Modifique MainActivity.java anulando el método createSplashLayout proporcionado por RNN.

Esos son todos los pasos para Android, pero hay un paso adicional al final para la plataforma Android e iOS.

iOS

Generar activos de Android usando RN-Toolbox (Opcional)

Ejecute el siguiente comando:

$ yo rn-toolbox: assets --splash splashscreen.psd --ios

Hará estas preguntas:

  • Nombre del proyecto: escriba el nombre de su proyecto o simplemente ingrese si la sugerencia es correcta
  • Sobrescribir project.pbxproj: escriba "y" (sí) y luego presione Intro
  • Sobrescribir Info.plist: escriba "y" (sí) y luego presione Intro

Esto agregará / modificará lo siguiente:

  • Cree un nuevo archivo LaunchImage.launchimage que contenga activos analizados
  • Elimine la clave UILaunchStoryboardName y su valor de Info.plist
  • Agregue la configuración ASSETCATALOG_COMPILER_LAUNCHIMAGE_NAME para la configuración de compilación de Depuración y Liberación

Esto hará todos los trabajos. No tienes que hacer nada más.

Instrucción iOS (3 pasos) - Solo manual

Paso 1

Abra su proyecto Xcode en /ios/{you-project-name}.xcodeproj
En su carpeta de proyecto, cree una nueva imagen de lanzamiento en Images.xcassets
Agregue sus activos a esta imagen de lanzamiento.

Ejemplo de imagen de lanzamiento

Paso 2

Elimine la pantalla de inicio de React Native predeterminada eliminando los pares clave-valor UILaunchStoryboardName en Info.plist

Paso 3

Aplique la imagen de inicio en la pestaña General> Iconos de aplicaciones e imágenes de inicio
Cambiar Launch Images Sourc a LaunchImage recién creada

Ejemplo de configuración de LaunchImage

Eso es todo para iOS, consulte el paso de bonificación a continuación para Android e iOS.

Paso de bonificación

Agregue animationType: "fade" cuando inicie la aplicación con startTabBasedApp o startSingleScreenApp hará que la transición parezca más fluida.

Notas de RN-Toolbox

  • Puede ejecutar la caja de herramientas para generar activos para Android e iOS a la vez sin especificar el indicador de la plataforma, pero no lo recomiendo, ya que es más difícil realizar un seguimiento de los cambios.
  • No es necesario mantener el archivo splashscreen.psd después del proceso.
  • Es posible que los activos generados no funcionen correctamente en todos los dispositivos. Se recomienda reemplazar los activos de la pantalla de inicio utilizando los recursos del equipo de diseño

El fin

Este es mi primer artículo en Medium, así que si hay algún error o problema, por favor deje un comentario.

El código fuente de este ejemplo se puede encontrar aquí. Puede verificar la confirmación para ver los cambios de cada instrucción.

Espero que este tutorial te ayude a resolver cualquier problema que tengas al implementar RNN Splash Screen :)