Diseño y Desarrollo de Software

APLICACIONES MOVILES MULTIPLATAFORMA

LABORATORIO N° 06

React Navigation: Tap Navigation

Alumno(s): Nota

Grupo: Ciclo:V

Laboratorio 6: React Navigation: Tap Navigation

Aplicaciones Móviles Multiplataforma

Objetivos:
Al finalizar el laboratorio el estudiante será capaz de:
 Utilizar el gestor de paquetes yarn
 Identificar los siguientes componentes createBottomTabNavigator,
createMaterialBottomTabNavigator y createMaterialTopTabNavigator
 Utilizar React Navigation para la navegación entre interfaces

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: ‘Project06’

1.1. Utilizar el Project05 (de la sesión anterior)

1.2. Abrir y Ejecutar un emulador en Genymotion

1.3. Ejecutar el proyecto: Project05

2. Instalación de gestor de paquete ‘yarn’

2.1. Aquí está el link de descarga de acuerdo al sistema operativo que tengan
https://classic.yarnpkg.com/en/docs/install/#windows-stable

2.2. Verificar si se ha instalado correctamente el gestor de paquetes ‘yarn’

2.3. Ubicarse en la ruta raíz del proyecto y hacer un upgrade de paquetes con el siguiente
comando:

Guía de Laboratorio No 5 Pág. 2

Aplicaciones Móviles Multiplataforma

3. Utilizar ‘createBottomTabNavigator’

3.1. Instalar el paquete especifico

3.2. Importar el siguiente componente App.js

3.3. Luego antes de definir la clase principal colocar la instancia de createBottomTabNavigator

3.4. Modificar el contenido de la función render() en el archivo App.js con el siguiente contenido

3.5. Verificar el correcto funcionamiento:

4. Utilizar ‘createMaterialBottomTabNavigator

4.1. Instalar el paquete especifico

4.2. Instalar librería para manejo de los iconos

Guía de Laboratorio No 5 Pág. 3

Aplicaciones Móviles Multiplataforma

4.3. En archivo App.js añadir

4.4. Luego antes de definir la clase principal colocar la instancia de

createMaterialBottomTabNavigator (eliminar o comentar const Tab previamente definida
en el punto anterior)

4.5. Modificar la función render() en el archivo App.js con el siguiente contenido:

4.6. Verificar el correcto funcionamiento funcionamiento:

Guía de Laboratorio No 5 Pág. 4

Aplicaciones Móviles Multiplataforma

5. Utilizar ‘createMaterialTopTabNavigator

5.1. Instalar el paquete especifico

5.2. En archivo App.js añadir

5.3. Luego antes de definir la clase principal colocar la instancia de

createMaterialBottomTabNavigator (eliminar o comentar const Tab previamente definida
en el punto anterior)

5.4. Verificar el correcto funcionamiento funcionamiento:

Tarea:

1. Realizar un Proyecto de ‘TabDetails’ con el siguiente contenido:

Objetivo:

A la tarea del Proyecto anterior añadir BottomTabNavigator luego de que se

loguearse correctamente

 Investigar y utilizar un StackNavigator para cara cada una de los ítems del Tab
 Generar un BottomTabNavigator que tenga las siguientes opciones ‘Listado’,
‘Video’ y ‘Settings’
 Investigar cómo funciona la librería de terceros ‘react-native-video’ y utilizarla
para la opción ‘Video’

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

Aplicaciones Móviles Multiplataforma

Detalle de Video (el video es el libre):

Detalle de Settings:

2. Crear repositorio ‘DAM-Lab06-Tarea’ en GitLab y subir el Proyecto de

‘TabDetails’
Guía de Laboratorio No 5 Pág. 6
Aplicaciones Móviles Multiplataforma

Conclusiones:

Guía de Laboratorio No 5 Pág. 7