Introducción
En esta clase, vamos a proceder con el maquetado de las pantallas principales de nuestra aplicación. Para ello, utilizaremos un enfoque sencillo y manual, comenzando por las pantallas de login y registro, y posteriormente abordaremos las pantallas de inicio y perfil.
Preparación del Proyecto
Creación de la Estructura de Pantallas
Primero, abrimos nuestra aplicación en el emulador de iOS. Mientras el emulador se está levantando, vamos a crear la estructura básica en el proyecto. Nos dirigimos a la carpeta src/containers y, dentro de la carpeta out, creamos una nueva carpeta llamada Screens. En esta carpeta, vamos a crear dos componentes: LoginScreen y RegisterScreen.
Login Screen
Comenzamos con el componente de LoginScreen, que es el más sencillo. Lo exportamos de forma predeterminada, y dentro de la carpeta Screens, también creamos un archivo index.ts para exportar las pantallas correctamente.
Register Screen
El siguiente paso es crear el componente RegisterScreen, que seguiremos una estructura similar. Para ello, eliminamos el export default y exportamos el componente de forma nombrada.
Organización del Código
De esta manera, ya tenemos los dos componentes: LoginScreen y RegisterScreen, junto con el archivo index.ts que los exporta. Además, en la carpeta out creamos otro archivo llamado index.ts, que exporta todo lo que se encuentra dentro de la carpeta Screens, siguiendo el patrón Barrel para mantener la organización del código.
Estructura del Proyecto
A continuación, nos dirigimos a la carpeta containers y creamos un archivo index.ts para mantener el patrón Barrel en esta carpeta también. De este modo, mantenemos una estructura ordenada en todo el proyecto, lo que facilita la navegación y el acceso a los diferentes componentes.
Integración de las Pantallas en la Navegación
Configuración del Stack de Autenticación
Ahora que tenemos nuestras pantallas creadas, pasamos a la configuración de la navegación. En la carpeta Navigation, comenzamos a importar las pantallas de LoginScreen y RegisterScreen. Modificamos el stack de autenticación para que apunte a estos nuevos componentes, reemplazando los componentes anteriores.
Pruebas de Navegación
Después de realizar la integración en la navegación, realizamos una prueba para verificar que las pantallas de login y registro se están mostrando correctamente en la aplicación. A través de Command + Click, podemos confirmar que la navegación está funcionando como se espera.
Maquetado de la Pantalla de Login
Estructura Básica de la Pantalla
En esta etapa, comenzamos a maquetar la pantalla de Login. Creamos un contenedor con flex: 1, y le aplicamos un fondo de color rosa para poder visualizar rápidamente los cambios. Sin embargo, es necesario ajustar el espacio superior para que la pantalla respete el área donde se encuentran la hora, el notch y otros elementos del sistema.
Uso de la Librería Safe Area
Para solucionar este problema, utilizamos la librería react-native-safe-area-context, y el hook useSafeAreaInsets. Este hook nos permite ajustar el espacio superior de la pantalla, asegurando que el contenido no se solape con las áreas del sistema.
import { useSafeAreaInsets } from 'react-native-safe-area-context';
const insets = useSafeAreaInsets();
Con este código, logramos respetar el espacio nativo de la pantalla del dispositivo, y ajustamos el contenedor de la pantalla de Login para que se vea correctamente.
Diseño de los Componentes de la Pantalla
En la siguiente fase, comenzamos a añadir los elementos de la pantalla de Login, como los campos de texto e inputs. Creamos un contenedor para cada campo y aplicamos estilos para que se alineen de manera adecuada. Ajustamos el tamaño y el espaciado para que la interfaz sea visualmente atractiva y funcional.
Estilo de los Inputs y el Título
Creamos dos campos: uno para el email y otro para la contraseña, con su respectivo label. También agregamos un título en la parte superior que indica «Login». Ajustamos el tamaño de la fuente y la alineación del texto para mejorar la legibilidad.
<Text style={styles.title}>Login</Text>
También nos aseguramos de que los inputs ocupen todo el ancho disponible, para mejorar la usabilidad de la pantalla.
Ajustes Finales en los Botones
Finalmente, añadimos los botones de Iniciar sesión y Crear cuenta. Utilizamos el componente Button de React Native para los botones, y los alineamos al centro. Para mejorar la experiencia del usuario, agregamos un pequeño margen entre los botones y el contenido principal.
<View style={styles.buttonsContainer}>
<Button title="Iniciar sesión" onPress={() => {}} />
<Button title="Crear cuenta" onPress={() => {}} />
</View>
Con estos ajustes, la pantalla de Login está completa y lista para ser utilizada.
Conclusión
En esta clase hemos completado el maquetado de la pantalla de Login y configurado las pantallas de Login y Registro en la navegación de nuestra aplicación. En la siguiente clase, continuaremos con el maquetado de la pantalla de Home y la funcionalidad de Cerrar sesión.
Antes de finalizar, realizamos un commit en Git para guardar nuestros avances:
git add .
git commit -m "Agrega screen de login"
Con esto, hemos terminado por ahora, y nos preparamos para la siguiente etapa del curso.