SPLASH SCREEN AND LOGIN
En esta primera parte vamos a ver la implementación de un proceso que seguramente utilizarás en la mayoría de tus proyectos con React Native, la transición que existe entre la pantalla Splash screen, nuestra pantalla de bienvenida, hacia la pantalla de acceso (Login) o hacia una pantalla de la navegación principal, y de la pantalla de acceso (Login) hacia una pantalla de la navegación principal. La particularidad de este proceso, es que la aplicación móvil tiene que tomar una decisión de acuerdo a la información obtenida y un proceso determinado que indica hacia dónde ir.
Hay que considerar que, hoy día casi ninguna aplicación móvil te permite acceder sin que haya un mínimo de información que proporcionar, puede ser un alias, tu correo electrónico, tal vez tu número de teléfono, cualquier información que le permita a la aplicación móvil generar un perfíl; hay otras aplicaciones que te pedirán más información para poder acceder a ellas, cualquiera que sea la situación, las aplicaciones móviles deben tener la capacidad de gestionar esta información.
A través del ejemplo que desarrollaremos, conoceremos un poco de la funcionalidad Context de React y de sus alcances en proyectos para aplicaciones móviles con React Native y haremos uso de su implementación para compartir información a través de variables o parámetros de manera directa entre las pantallas que se encuentran dentro del contexto. Aunque la funcionalidad Context de React es un tema avanzado en el desarrollo de aplicaciones móviles con React Native, es importante manejarlo a partir de este momento para familiarizarnos con su uso, ya que a medida que avancemos iremos desarrollando proyectos más dinámicos y sofisticados.
Recuerda que en el video solo se mostrará la implementación arriba descrita, 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 ejercicio que se realiza en él.
Entonces, en el directorio destinado para crear tus proyectos, crea un proyecto llamado SplashScreenAndLogin, con un tipo de proyecto Flujo de Trabajo Administrado – Managed Workflow y en blanco – Blank.
REFORZAMIENTO
Para ejercitar lo aprendido, solo intenta agregar estilo al contenido de las pantallas y también a las propias pantallas a través de sus atributos, esto nos ayudará a darle una mejor presentación a nuestro proyecto.
Puedes practicar aquí tus cambios.
React Native – Splash Screen, Login y Navegación Principal – 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, 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, Login y Navegación Principal – mejora de presentación – ver proyecto completo