SPLASH SCREEN DE BIENVENIDA
Por lo regular una pantalla de inicio o Splash Screen se utiliza para hacer llamadas a través de una API o servicio para obtener información que por lo general suele ser del usuario para intentar acceder a la aplicación móvil, también puede ser utilizada para obtener alguna configuración guardada en el propio dispositivo, o simplemente se utiliza como pantalla de bienvenida según el propósito con que se haya hecho la aplicación móvil.
Una Splash Screen se mantendrá visible hasta que se le indique lo contrario, así es como funciona un pantalla de inicio o Bienvenida.
USO DE LA NAVEGABILIDAD
Ahora que ya sabemos cómo funciona la navegabilidad de una aplicación móvil con React Native, a través del uso de las utilidades como Stack Navigator, Bottom Tabs Navigator, Material Top Tabs Navigator y Drawer Navigator de la librería React Navigation, podemos iniciar con la preparación de las pantallas de un proyecto real, es decir, donde la aplicación móvil tiene que cargar talvez una pantalla de inicio, lo que se conoce como Splash Screen, ir a una pantalla de Login, recuperar Contraseña, aceptar Términos y Condiciones, Registro, etc, para al finar acceder al contenido de la aplicación móvil.
Aunque cada tipo de navegación que aprendimos a implementar se puede utilizar y combinar en cualquier parte del proceso de nuestra aplicación móvil, es importante saber que la utilidad Stack Navigator, usualmente es la que se utiliza en el comienzo de cualquier aplicación móvil, es decir, las características y funcionalidad de Stack Navigator nos van a permitir acceder o no al contenido de nuestra aplicación móvil.
Vamos a hablar un poco de la importancia de la navegación Stack Navigator en la creación de aplicaciones móviles con React Native. Si nos dimos cuenta, Stack Navigator es la única navegación que para poder interactuar con ella, tenemos que crear botones para desplazarnos entre las pantallas, todas las demás utilidades de navegación: Bottom Tabs Navigator, Material Top Tabs Navigator y Drawer Navigator, nos proporcionan de manera automática un menú que nos permite desplazarnos entre ellas, con esta característica de Stack Navigator, tendremos la posibilidad de filtrar a los usuarios que pueden acceder a nuestra aplicación móvil de los que no. Veamos un ejemplo.
Recuerda que en el video solo se mostrará la implementación de una Splash Screen, por lo que la creación del proyecto, la visualización a través de Expo Go app y la carga del proyecto en Entorno de Desarrollo Integrado (IDE) deberá ser realizada antes de continuar, en caso de que quieras seguir el trabajo que se realiza en él.
Entonces, en el directorio destinado para crear tus proyectos, crea un proyecto llamado SplashScreen, con un tipo de proyecto Flujo de Trabajo Administrado – Managed Workflow y en blanco – Blank.
REFORZAMIENTO
Para ejercitar lo aprendido, personaliza tu pantalla Splash Screen y da un mejor aspecto a cada una de tus pantallas de navegación (Inicio, Configuración y Perfíl), así como al Menú que nos proporciona la utilidad Bottom Tabs Navigator que implementamos.
Puedes revisar los atributos de estilo de los componentes de diseño de React Native como Text y View en el siguiente enlace, para que pruebes nuevas implementaciones de diseño y conozcas un poco más sobre su visualización.
React Native Text Style – Documentación oficial de react Native
React Native View Style – Documentación oficial de react Native
Bottom Tabs Navigator – Documentación oficial de React Navigation
Además de colocar un poco de diseño, he colocado un contador en la pantalla SplashScreen para visualizar el tiempo que transcurre antes de pasar a la navegación principal.
Puedes practicar aquí tus cambios.
React Native – Splash Screen, Stack Navigator y Bottom Tabs Navigator – ver proyecto completo
Una vez que tengas la certeza de los cambios que hiciste, puedes implementarlos en tu proyecto para que regreses a él cuando necesites recordar algo de lo que hiciste.
Si no has conseguido algún resultado agregando diseño a tu pantalla de inicio, a las pantallas principales o al menú de navegación, no te preocupes, revisa el siguiente código y trata de comprenderlo. Como de Desarrollador de Aplicaciones Móviles con React Native también tienes que aprender a leer códigos y saberlos interpretar, toma este ejercicio para reforzar esta parte que también es muy importante, es otra forma de aprender.
React Native – Splash Screen, Stack Navigator y Bottom Tabs Navigator – agregando un poco de diseño – ver proyecto completo