Scribd
Cargar
103 vistas

Lab02-DAM - React Native - Componentes

Este documento presenta una guía para un laboratorio sobre componentes en React Native. El objetivo es que los estudiantes aprendan a identificar y utilizar los principales componentes como Image, TextInput y TouchableOpacity. La guía incluye instrucciones para crear un proyecto, modificar el archivo App.js para incluir diferentes componentes y funcionalidades interactivas, y publicar el código en un repositorio de GitLab.

Cargado por

Leonardo fabrizio Quispe Paz
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
103 vistas

Lab02-DAM - React Native - Componentes

Este documento presenta una guía para un laboratorio sobre componentes en React Native. El objetivo es que los estudiantes aprendan a identificar y utilizar los principales componentes como Image, TextInput y TouchableOpacity. La guía incluye instrucciones para crear un proyecto, modificar el archivo App.js para incluir diferentes componentes y funcionalidades interactivas, y publicar el código en un repositorio de GitLab.

Cargado por

Leonardo fabrizio Quispe Paz
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 8

Diseño y Desarrollo de Software

APLICACIONES MOVILES MULTIPLATAFORMA

LABORATORIO N° 02

Componentes de React Native

Alumno(s): Quispe Paz, Leonardo Fabrizio Nota

Grupo: Ciclo:V

Laboratorio 2: Componentes en React Native


Objetivos:
Aplicaciones Móviles Multiplataforma

Al finalizar el laboratorio el estudiante será capaz de:


 Identificar los principales componentes en React Native
 Utilizar principales componentes de

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

1.1. Crear un nuevo proyecto react native:

1.2. Abrir y Ejecutar un emulador en Genymotion

1.3. Ejecutar el proyecto: Project02

2. Modificación de archivo principal App.js del proyecto ‘Proyecto02’,

2.1. Abrir con un Editor de Código (Visual Studio Code) el Proyecto02 y modificar el archivo
App.js con el siguiente contenido:

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


Aplicaciones Móviles Multiplataforma

3. Interacción con Componentes de React Native

3.1. Insertar una imagen


3.1.1. Añadir un componente de React Native

3.1.2. Descargar desde internet un logo de react native con extensión .png, crear una carpeta
‘img’ dentro del proyecto y guardar esa imagen dentro de ‘img/logo.png’

3.1.3. Añadir el componente Image dentro de App.js, como está a continuación:

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


Aplicaciones Móviles Multiplataforma

3.2. Insertar Input

3.2.1. Importar el componente ‘TextInput’ de React Native

3.2.2.Modificar el archivo App.js

3.2.3 Verificar correcto funcionamiento (ingresar cualquier texto)

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


Aplicaciones Móviles Multiplataforma

3.3. Insertar TouchableOpacity:

3.3.1. Importar componente, inicializar estado y crear función onPress (contador)

3.1.2. Añadir el siguiente contenido en la vista:

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


Aplicaciones Móviles Multiplataforma

3.1.3. Añadir al componente StyleSheet el siguiente contenido:

3.1.4. Verificar el correcto funcionamiento

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


Aplicaciones Móviles Multiplataforma

4. Creación de repositorio en GitLab: ‘DAM-Lab-02’


1.1. Crear un repositorio en GitLab
1.2. El proyecto ‘Project02’ subir a GitLab (Utilizar para ello los comandos vistos en sesión de
Laboratorio 01 del curso DAWA)
Link: https://snack.expo.dev/@leonardoqp/proyecto02-lab-02

Tarea:
1. Realizar un Proyecto de ‘Login’ con el siguiente contenido:
 Imagen logo de Empresa
 2 Inputs (para ingreso de Usuario y Contraseña)
 Botón de Ingreso (Utilizar TouchableOpacity)

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

Link: https://snack.expo.dev/@leonardoqp/proyecto02-lab02-tarea

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


Aplicaciones Móviles Multiplataforma

Conclusiones:

- Se logro renderizan los componentes en react native, ya que es muy similar a react.js.
-
- Se logro Identificar los principales componentes en React Native y el como aplicarlo de la
manera correcta.

- Tuve complicaciones para desarrollar el laboratorio de manera local ya que mi pc es de


bajos recurso, pero con la ayuda de https://snack.expo.dev se logro resolver de manera
sencilla.

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

También podría gustarte