Como crear una aplicacion con react native

1. INGENIERÍA INFORMÁTICA
Trabajando con React Native
Asignatura: Desarrollo de Aplicaciones Móviles
Nombre: Kevin Ricardo Bustamante Santos
N° de control: 18520450
Profesor (a): Dra. Mercedes Hernández de la Cruz
Fecha: 12 de marzo del 2022

2. 1
Saludos en esta ocasión traigo evidencia de como instalé y seguí los pasos del
video: “React Native, Curso para Principiantes (usando Expo)”, a
continuación, dejo un índice para que navegue más fácilmente en el documento.
Contenido
Contenido.......................................................................................................................... 1
Instalación de React Native............................................................................................... 2
Creando una nueva aplicación con Visual Studio Code ..................................................... 6
Comenzando a trabajar desde el visual studio y visualizando la aplicación en celular ..... 8
Ejercicio Hola Mundo ...................................................................................................... 13
Modificando el Hola Mundo.............................................................................................................. 14
Estilos (StyleSheet)............................................................................................................................ 14
Usando Objetos para los estilos......................................................................................................... 15
Agregando Imágenes ...................................................................................................... 15
Utilizando Botones .......................................................................................................... 19
Image Picker.................................................................................................................... 21
Compartir imagen ........................................................................................................... 24
Splash, Screen e Iconos.................................................................................................... 25
Haciendole Deploy a la aplicación................................................................................... 27

3. 2
Instalación de React Native
Lo primero que hice fue ir a la página principal de React Native y dar clic en Get
Started

4. 3
Después seleccione la opción Environment setup y seleccione la opción setting up
the Development enviroment, aquí es donde vienen los pasos para instalarlo y
vamos a seguirlos.
Como primer paso debemos tener node instalado, cosa que ya hicimos en pasos
anteriores. El segundo paso es abrir el CMD en modo administrador y poner este
comando: npm install -g expo-cli
Después de ejecutar ese comando se comienza a hacer la instalación.

5. 4
Aquí vemos como se terminó de instalar
Estos son los comandos que hay que poner para crear un proyecto.
expo init AwesomeProject
cd AwesomeProject
npm start # you can also use: expo start
Pero primero que nada hare una carpeta donde estare haciendo el proyecto.
Al poner el primer comando se nos muestra un menu donde tendremos que
seleccionar una plantilla,en mi caso yo seleccionare el simple.

6. 5
Después se pone a construir el proyecto
Aquí podemos ver cuando ya termino

7. 6
Si vamos a la carpeta que cree podemos ver que ahí se creó el proyecto, junto con
el archivo App.js que es el que se tiene que modificar
Creando una nueva aplicación con Visual Studio
Code
Para comenzar voy a crear una carpeta justo donde quiero crear mi aplicación, en
mi caso pondré la aplicación de prueba en una carpeta llamada:
Aplicacion_Nativa_de_Prueba

8. 7
Para comenzar voy a crear una aplicación en esa ruta con el nombre
aplicacin_nativa1, con el siguiente comando expo init aplicacion_nativa1 esto
desde el CMD.
Lo típico, hacer cd a la carpeta donde vamos a crear el proyecto, una vez
localizados en esa carpeta vamos a poner el comando y ejecutarlo, cuando nos de
las opciones para elegir la plantilla seleccionamos plantilla en blanco y es todo, se
comenzara a crear un nuevo proyecto.

9. 8
Cuando se termina de crear el proyecto podremos ver que nos da los siguientes
comandos:
- cd aplicacion_nativa1
- npm start # you can open iOS, Android, or web from here, or run
them directly with the commands below.
- npm run android
- npm run ios # requires an iOS device or macOS for access to an
iOS simulator
- npm run web
Comenzando a trabajar desde el visual studio y
visualizando la aplicación en celular
Abriremos la carpeta en el visual studio arrastrare la carpeta aplicación_nativa1 al
visual studio para comenzar

10. 9
Abrire en visual studio una terminal y ejecutare el comando “npm start” para
ver como vamos a visualizar la aplicación.
Como podemos ver, como resultado nos da un código QR y opciones para ver en
Android, para ver en web y otras opciones, pero ya vimos como se veía el
contenido en pc en pruebas anteriores. Asi que tratare de visualizar el contenido
en mi celular. Ya que mi pc no soporta emuladores.

11. 10
Por alguna razón la pagina no me abria en el navegador que suelo usar. Asi que
trate de abrirla en Edge.
Y ahí si me funciono

12. 11
Lo que hice en mi celular físico fue descargar la aplicación expo y conectarme a la
misma red de internet.
Despues escanie el código QR de la pagina y me comenzó a cargar.

13. 12
Incluso en el cmd (si, dije que lo haría desde el visual studio code, pero llege a
notar que no se conectaba al celular y lo hice desde la pagina) comenzó a mostrar
los avances.

14. 13
Ejercicio Hola Mundo
Viendo como funcionó la conexión de mi teléfono con el proyecto decidí hacer la
conexión desde el visual studio, ahora intentare hacer un hola mundo siguiendo el
código que hacen en el video, tratare de comentarlo asi como yo lo entendí.
Despues de hacer el código guarde y recarge la
aplicación, y este fue el resultado
Bueno creo que el resultado fue medianamente bueno,
el Hola mundo se imprimio,aunque no se si es mi
celular o que se yo, el hola mundo salió hasta la parte
de arriba. Supongo que puede arreglarse con estilos o
algo parecido.

15. 14
Modificando el Hola Mundo
Dado que la aplicación quedo muy simple vamos a agregar algunos estilos, e
incorporar un contenedor, para centrar las letras. El resultado fue este:
Estilos (StyleSheet)
Ahora que vi que funciono iré más allá y agregareun fondo #f1f1f1 y que la letra se
vea azul, finalmente se mira así.
Pero ahora suponiendo que tenemos muchos mas elementos no podemos
pasarnos poniendo los estilos así. Por lo que ahora vamos a hacer un apartado
donde podremos los estilos y los mandaremos a llamar desde los elementos,

16. 15
trararé de comentar en el código para ver el funcionamiento general de cada
código.
Usando Objetos para los estilos
Como decía anteriormente, seria incorrecto y tedioso revisar el código llevando
todos esos estilos, por lo que creamos una constante llamada styles en la cual
guardamos un objeto que guardara unas variables que tendrán los estilos. Con
esto, en el elemento al que le queramos poner cierto estilo vamos a invocar al
objeto junto con su variable, seria algo como style={styles.variable}.
No pondré captura de la aplicación por que no cambie ningún estilo, avancemos
con el siguiente
Agregando Imágenes
Vamos a ver como agregar imágenes, como a mi nunca me ha gustado entregar
las pacticas tal y como las muestran, yo voy a usar mis propias imágenes.
Usare este hosting de imágenes https://imgbb.com/ y subiré esta foto.

17. 16
Al subir nuestra imagen nos entrega urls directas, de inserccion, de embebido etc.
Perfecto para este ejercicio.
Ahora, en el código. Despues del texto pongo una imagen, con la url de la imagen
que genere anteriormente. En la constante styles pongo estilos para la imagen,
ancho de 250 x 250.

18. 17
Este es el resultado, la aplicación me pone el texto y la imagen abajo, con el
tamaño especificado y un borderRadius de 20px que puse.
Ahora vamos a insertar una imagen desde el mismo proyecto, para eso,
guardamos nuestra imagen en la carpeta assets

19. 18
Una vez que pasé la imagen a la carpeta la importé (línea 3), después de eso,
puse un texto que decía algo como que es prueba y que después viene la imagen
de una esmeralda (línea 13).
Despues de esta línea puse una imagen, en source puse la variable con la que
había mandado a importar la imagen, y mas abajo el estilo imagen.

20. 19
Así es como quedo la aplicación después de esas modificaciones.
Utilizando Botones
Primero que nada vamos a importar el componente
Button para poder utilizarlo.
import { Text, View, StyleSheet, Image, Button }
from "react-native"; //Importamos los componenetes
que vamos a utilizar

21. 20
Bueno, teniendo dos imágenes y textos se lleno el espacio que tenia, asi que fui a
la documentación de React Native y puse en el buscador algo como Scroll, me
salió el componente ScrollView y lo puse.
Despues de eso, agrege etiquetas ScrollView y dentro de estas el contenido.
Ahora el código se extendió mucho como para mostarlo en una sola captura, pero
resumiendo este componente ScrollView me permitió que se pudiera deslizar el
contenido.
Bueno, regresando al tema de los botone, agrege un botón, color naranja, con un
evento que al presionarlo diera un alert con el mensaje “has presionado el Boton
:D”

22. 21
Acá podemos ver la
aplicación, con el botón,
le agrege al contenido un
padding, busque una
propiedad para que la
imagen de la esmeralda
no se viera cortada.
El botón salió tal y como
lo programe, y cuando se
presiona avienta una
alerta diciendo que se
presiónamos el botón.
Image Picker
React native no trae como tal un seleccionador de imagen, pero expo si. Vamos a
instalar esta característica con este comando: expo install expo-image-picker
Para instalarlo, abri el cmd en administrador, accedo a la ruta del proyecto y
cuando estuve ahí puse el comando y se instalo correctamente. Luego cerre el
visual studio y lo abri de nuevo y comenze a programar el funcionamiento del
image picker.
Para comenzar importe todos los paquetes de ImagePicker
import * as ImagePicker from 'expo-image-picker';
Lo que hice después es poner una condicional que le pidiera permiso al usario
para usar el almacenamiento. De hecho abajo ponemos que si el usuario concede
el permiso podamos abrir el almacenamiento, y en la consola imprimir los datos de
la imagen escogida

23. 22
En el celular permiti el acceso y seleccione una imagen, como respuesta me
devolvió los datos de la imagen
Asi es como pide el permiso para acceder a las fotos

24. 23
Para continuar vamos a importar useState
import React, { useState } from "react"; //Importamos react y react native
En la línea 16 estamos poniendo una condicional que no hará nada cuando el
usuario entre a seleccionar una imagen, pero regrese. En la línea 19 estamos
guardando la ruta de la imagen en una variable llamada localUri.
Puse otra etiqueta de imagen, que dice que si se selecciono una imagen se
seleccione y carge, de lo contrario se pondrá una imagen por defecto

25. 24
En la imagen de la izquierda
podemos ver la imagen que puse
que aparezca por defecto, cuando
el usuario presiona el botón
amarillo se abre el explorador de
archivo, y en cuanto elige una
imagen, esta se pone en lugar de
la imagen por defecto.
Compartir imagen
Para compartir la imagen vamos a utilizar otro modulo.
Si vamos a la pagina expo sharing nos da este comando: expo install expo-sharing.
Igual, vamos al cmd y hacemos cd a la ruta de nuestra aplicación y ponemos el
comando y se instala.
Importamos el modulo: import * as Sharing from 'expo-sharing';

26. 25
En pocas palabras, aquí estamos haciendo un método que nos va a hacer una validación para ver si en la
plataforma en la que estamos podemos compartir. Si no se puede entonces manda un alert , si se puede
entonces abre el menú para compartir.
Splash, Screen e Iconos
Llegando casi al final es hora de hacer el icono y lo demas, yo utilizare la imagen
del chico con sombrero, utilizando como editor de imágenes a Photoshop.
Dado que el objetivo no es documentar como hice estos diseños básicos no
mostrare como los hice.

27. 26
Termine de reemplazar los iconos por defecto por la foto que escogi, no tuve el
celular por que se descargo, pero lo probe en la web y salió el favicon.

28. 27
Haciendole Deploy a la aplicación
Para hacerle deploy a la aplicación vamos a ir al cmd y ejecutar este comando,
estando en la ruta de la aplicacion: expo build:Android
Una vez que ponemos el comando nos pregunta que cual es el titulo que le vamos
a poner, yo le pondré com.krbustamante.aplicacionnativa1
Despues nos dice que ingresemos nuestro correo y nuestra contraseña.

29. 28
Una vez que revise mis contraseñas y vi que registre mi nombre de usuario rarito,
inicie sesión exitosamente. Despues me pregunta que si quiero apk o app-bundle.
Yo escogi apk.
Despues de haber aceptado que fuera apk, y que generara una keystore y aceptar
instalar expo-updates, se puso a trabajar

30. 29
Despues de un rato termino de construirse.

31. 30
La descarge y termino pesando 63mb, creo que las imágenes que use fueron muy
pesadas.
Bueno aquí dejo un enlace para descargar la aplicación: https://exp-shell-app-
assets.s3.us-west-
1.amazonaws.com/android/%40krubstamante/aplicacion_nativa1-
3071ca5728c74c42a06f2bb8791b9bbc-signed.apk