Laboratorio 05 y 06: Image Picker – Tabs y Snack Navigation

Aplicaciones Móviles Multiplataforma                [pic 1]

[pic 2]

[pic 3]

Laboratorio 05 y 06: Image Picker – Tabs y Snack Navigation

Objetivos:

Al finalizar el laboratorio el estudiante será capaz de:

• Reconocer y aplicar Image Picker
• Reconocer y aplicar Tabs Navigation
• Reconocer y aplicar Snack Navigation

Seguridad:

• Ubicar maletines y/o mochilas en el gabinete del aula de Laboratorio.
• No ingresar con líquidos, ni comida al aula de Laboratorio.
• Al culminar la sesión de laboratorio apagar correctamente la computadora y la pantalla, y ordenar las sillas utilizadas.

Equipos y Materiales:

• Una computadora con:
• Windows 7 o superior
• Conexión a la red del laboratorio

• Máquinas virtuales:
• Windows 7 Pro 64bits Español – Plantilla

Procedimiento:

1. Creación de un nuevo Proyecto: ‘Proyecto05_06’

1. Mediante una ventana de comandos (o terminal) generamos un nuevo proyecto en blanco, haciendo uso del siguiente comando:

expo init proyecto05_06

1. Abrir el proyecto en VS Code

1. Modificación de archivo ‘App.js’

1. Borrar el contenido del archivo ‘App.js’ e ingresar el código correspondiente a ‘Hola Mundo’ centrado en la pantalla (se puede hacer uso del comando ‘rnfe’ de la extensión ES7)

1. Guardar los cambios. Mediante la ventana de consola ingresar a la carpeta del proyecto y ejecutarlo mediante el comando: ‘npm start’.

1. En caso queramos visualizar el resultado mediante el navegador, debemos instalar las dependencias necesarias, usando el comando:

npx expo install react-native-web@~0.18.10 react-dom@18.2.0 @expo/webpack-config@^18.0.1

1. Mostrar el código generado y los resultados obtenidos.

[pic 4]

1. Uso de Image Picker

1. Detener la ejecución del proyecto actual.

1. Mediante una ventana de consola, ingresar el siguiente comando para instalar el módulo Image Picker de Expo

(Documentación oficial: https://docs.expo.dev/versions/latest/sdk/imagepicker/):

expo install expo-image-picker

1. Una vez instalado, modificamos el archivo ‘App.js’ como sigue a continuación:

[pic 5]

[pic 6]

[pic 7]

1. Guardamos los cambios, ejecutamos el proyecto, comprobamos y adjuntamos resultados obtenidos. En caso elijamos “Deny” al momento de requerirse permiso, debemos volver a ejecutar el proyecto.

[pic 8]

1. Modificamos el código de ‘App.js’ como se muestra a continuación:

[pic 9]

[pic 10]

[pic 11]

[pic 12]

1. Guardamos los cambios, ejecutamos el proyecto, buscamos una imagen que haya sido descargada en nuestro equipo, comprobamos y adjuntamos los resultados obtenidos.

[pic 13]

1. Tabs y Stack Navigation

En un laboratorio anterior vimos sobre Drawer Navigation, pero en sí disponemos de 2 opciones principales más (Button Tab Navigation / Stack Navigation) para organizar las pantallas y opciones diversas en un proyecto. De acuerdo a la documentación oficial de React Navigation (https://reactnavigation.org/ ), empecemos instalando los paquetes principales en el proyecto:

1. Instalación de los paquetes requeridos:

npm install @react-navigation/native

1. Instalación de dependencias de Expo:

npx expo install react-native-screens react-native-safe-area-context

1. Instalación de librerías de Navigation:

npm install @react-navigation/bottom-tabs

npm install @react-navigation/native-stack

expo install react-native-gesture-handler

1. En el Proyecto creamos un archivo llamado ‘Navigation.js’. Luego, creamos una carpeta Con ‘Screens’. Dentro de esa carpeta, creamos los archivos ‘HomScreen.js’, ‘SettingsScreen.js’ y ‘StackScreen.js’.

[pic 14]

1. En el archivo ‘HomeScreen.js’ colocamos el siguiente código:

[pic 15]

1. Colocamos un código similar para ‘SettingsScreen.js’, con el cambio siguiente:

[pic 16]

1. Hacemos un cambio similar para ‘StackScreen.js’.

1. Ingresar el siguiente código en el archivo ‘Navigation.js’:

[pic 17]

1. Finalmente, modificamos el archivo ‘App.js’ como sigue:

[pic 18]

1. Guardamos todos los cambios, ejecutamos el proyecto, comprobamos y mostramos los resultados obtenidos, haciendo comentarios diversos.

[pic 19]

[pic 20]

1. Regresamos al archivo ‘Navigation.js’ e ingresamos el siguiente código:

[pic 21]

1. Esta importación permite modificar los iconos de los botones. Para ello, se hace uso de la documentación oficial de Expo Icons (https://icons.expo.fyi/), filtrando por ‘MaterialCommunityIcons’.

1. Completamos el código como sigue:

[pic 22]

1. Guardamos los cambios, ejecutamos el proyecto, comprobamos y mostramos los resultados. Hacemos comentarios diversos.

[pic 23]

1. Agregación de Stack Navigation

1. Agregamos el siguiente código en el archivo ‘Navigation.js’, como se muestra a continuación:

[pic 24]

[pic 25]

1. Luego, nos ubicamos en el archivo ‘HomeScreen.js’ y agregamos el siguiente código:

[pic 26]

[pic 27]

1. Guardar los cambios, ejecutar el proyecto, comprobar y mostrar los resultados obtenidos. Hacer comentarios diversos.

[pic 28]

TAREA

1. Generar un nuevo proyecto (tema libre), el cual, integre el funcionamiento del Tabs Navigator con Stack Navigator, haciendo uso de la documentación oficial de React Navigator. Complementar con el uso de iconos diversos de Expo.[pic 29]

CONCLUSIONES

• Se concluye que se configuran dos stacks de navegación, uno para las películas y otro para la configuración. Esto implica que se crean dos conjuntos separados de pantallas que se pueden navegar de manera independiente.

• Se crea un Tab Navigator que contiene las dos opciones de navegación, es decir, las opciones de navegación entre las pantallas de películas y la pantalla de configuración. Esto permite alternar fácilmente entre las dos opciones dentro de la aplicación.

• Se concluye que se utiliza el componente FlatList para mostrar una lista de películas. Los datos de las películas están definidos en un arreglo llamado "movies", que contiene objetos con propiedades como el título, el año y la imagen de cada película. El componente MovieItem se utiliza para renderizar cada elemento de la lista, mostrando información como el título y la imagen de la película.

• Se concluye que al hacer clic en una película de la lista, se navega a la pantalla de detalles de la película correspondiente. La información de la película seleccionada se pasa como parámetro a través de la navegación, lo que permite mostrar los detalles correctos en la pantalla de detalles (MovieDetailsScreen), como la imagen y el título de la película.

• Uso de @expo/vector-icons: Se menciona que se utiliza el paquete "@expo/vector-icons" para mostrar iconos en la barra de navegación inferior. Esto proporciona una forma fácil de agregar iconos visuales a la interfaz de usuario de la aplicación.

• Las librerías de navegación mencionadas, "@react-navigation/bottom-tabs" y "@react-navigation/native-stack", junto con "react-native-gesture-handler" (que se instala mediante Expo), son utilizadas para implementar la navegación en una aplicación React Native.

Cada una de estas librerías cumple un propósito específico:[pic 30]

Guía de Laboratorio No 5 y 6                Pág.

...