React

Native
Entorno web y primeras
aplicaciones

M. C. Horacio Augusto
Navarro García
Expo Snack
Es la herramienta de Expo que permite ejecutar proyectos completos React Native en un
navegador sin necesidad de descargas.

Vista de Expo Snack una

vez que nos hemos
identificado con una Un snack es un snippet, es
cuenta. decir, un componente.

Por lo que para crear un

proyecto nuevo, iniciamos
aquí
Haciendo clic cambiamos el nombre

• Guardar
• Probar en dispositivo
• Descargar
• Mostrar código insertado
• Buscar snacks
• Ver mis snacks
Podemos acceder a esta herramienta desde su sitio web

https://snack.expo.io/

Y tendremos las mismas posibilidades de realizar pruebas como lo hacemos de forma

local.

La opción My Device nos mostrará un código QR para escanearlo y probarlo en uno o más
dispositivos.

Las opciones IOS y Android son simuladores de dichas plataformas dentro del mismo sitio

La opción WEB nos muestra como se vería nuestro proyecto en web.

En esta herramienta es sumamente sencillo iniciar un proyecto, basta con ingresar a la
URL del sitio para tener un proyecto que podemos modificar y probar con las mismas
funcionalidades que tenemos de forma local.

Además podemos guardar el proyecto dentro del mismo entorno web para lo que es
necesario contar con una cuenta y haber ingresado con el respectivo usuario y contraseña.

También podemos descargar el proyecto y buscar ejemplos.

Errores y depuración
Como sucede en todos los lenguajes de programación en React Native tenemos dos tipos
de indicadores de que algo no esta bien.

• RedBox: Representa un error en nuestro código que impide la ejecución de la

aplicación.
• YellowBox: Representa una advertencia que nos muestra un posible problema
que deberíamos de atender antes de distribuir nuestra aplicación.

También podremos crear nuestros propios errores utilizando console.error(“Mensaje de

error”) y advertencias utilizando console.warn(“Mensaje de advertencia”).
Cuando tengamos un error durante el desarrollo, podremos verlo en la pila de errores que
es un reporte de las acciones recientes realizadas por nuestra aplicación o generadas
cuando esta tiene un fallo.

La pila de errores la encontramos tanto en nuestra ventana de línea de comandos como

en la App Expo.

Esta pila es muy valiosa ya que nos mostrará la ubicación donde se genera el error.
Incluyendo la línea y en algunos casos la columna (carácter).
Nota:

Debemos ir al
origen del error,
ya que se
presenta ese error
y todos los que se
origina derivados
de ese en una pila
(LIFO).
Entendiendo React Native
El código de nuestra primer aplicación no se ve tan simple como la creación de la misma,
es por ello que vamos a explicar un código más sencillo para poder entender lo que
sucede.
Es el código para un “Hello, world” muy sencillo y a
continuación lo explicamos:

• Lo primero que hacemos es importar React para

poder utilizar JSX que posteriormente serán
transformados en componentes nativos ara cada
plataforma, mediante la sentencia import.
• En la segunda línea importamos los componentes
Text y View de react-native.
• Después encontramos la función HelloWorldApp,
que es un componente funcional y se comporta
igual que React para la web.
• Esta función regresa un componente View con
algunos estilos y un componente Text como sus
hijos.
• El componente Text nos permite dibujar un texto,
mientras que el componente View dibuja un
contenedor el cual tiene algunos estilos aplicados.
• El primer estilo es la prop flex: 1, define como
nuestros elementos van a llenar el espacio
disponible en el eje principal. Como solo tenemos
un contenedor se tomará el espacio disponible del
componente padre. En este caso al ser el único
componente tomará el espacio disponible en la
pantalla.
• El siguiente estilo es la prop justifyContent:
“center”, indica que se debe alinear los hijos del
contenedor (View) en el centro del eje principal del
mismo contenedor.
• Finalmente tenemos la prop alignItems: “center”,
que alineará los hijos del contenedor en el centro
del eje horizontal del contenedor.
Props (propiedades)
La mayoría de componentes pueden ser personalizados al ser creados, con diferentes
parámetros. A estos parámetros los llamamos props.

Incluso los componentes propios, es decir, personalizados; utilizan props, esto nos
permite que un componente sea utilizado en varias partes de nuestra aplicación, con
pequeñas diferencias de propiedades en cada lugar.

Nos referimos a ellas como props.{Name} en nuestros componentes funcionales; o bien

this.props.{Name} en la clase del componente.
En el siguiente ejemplo podemos observar como se utiliza
las props para personalizar el componente Greeting;
pudiendo reutilizar nuestro componente para cada
agradecimiento que queramos hacer.

El componente LotsOfGreeting utiliza el componente

Greeting y se vale de la props para personalizar el
agradecimiento mediante el parámetro name en el
componente.

También en este ejemplo podemos ver la utilidad del

componente View, tanto como contenedor de otros
componentes, como un auxiliar para controlar los estilos y
el diseño de nuestra interfaz.

Con las props y los componentes básicos: Text, Image y

View podemos construir una gran variedad de pantallas
estáticas.
State (estado)
A diferencia de las props que son de solo lectura y no pueden ser modificadas, los state
permiten a los componentes React cambiar sus resultados todo el tiempo como respuesta
a las acciones del usuario, las respuestas de la red o cualquier otra cosa que podamos
leer.

Ya vimos que las props son variables que podemos pasar como parámetros de un
componente padre a un componente hijo. De forma similar los state también son
variables con la diferencia que no se pasan como parámetros, sino que el mismo
componente inicializa y maneja su state internamente.
En el siguiente ejemplo podemos observar como se utiliza el state count para contar las
veces que hacemos clic en un botón y lo mostramos en un texto.

1 2
Otros detalles
En este punto donde ya tenemos 3 ejemplos

• Hello World
• Greetings usando props
• Contador de clics

Explicaremos algunos detalles necesarios:

• Los componentes deben iniciar su nombre con letra mayúscula

• La función principal siempre es exportada mediante la sentencia
export default NombreFunción.
• Esta función debe heredar por medio de la sentencia extends de la clase
Component (componente) cuando se define como clase; cuando solo se define
solamente como función se hace sin herencia.
• Utilizamos la sintaxis de flecha (=>) para enlazar una función a un state o
simplemente enlazarla, en lugar de realizar la asignación manual. (Parecido a la
definición de listeners en Java)
La función principal siempre es exportada mediante la sentencia
export default NombreFunción.
Esta función hereda por medio de la sentencia extends de la clase Component
(componente) cuando se define como clase; cunado solo se define como función no
hereda.
Utilizamos la sintaxis de flecha (=>) para enlazar una función a un state o simplemente
enlazarla, en lugar de realizar la asignación manual.
Practiquemos un poco
Ejemplos
Recursos útiles
A continuación dejamos algunos recursos útiles para programar en React Native.

• Componentes y APIs - https://reactnative.dev/docs/components-and-apis

• Guía de props de React Native – https://reactnative.dev/docs/image-style-props
• Tipos de objetos - https://reactnative.dev/docs/pressevent
Estilos
En React Native los estilos son definidos como objetos JSON (Javascript object notation)
con una sintaxis similar a los atributos en CSS. Como objeto puede ser colocado en línea
en la props style de un componente o puede ser pasado a la función
StyleSheet.create(ObjetoEstilo) y ser almacenado en una variable para un acceso más
corto en línea utilizando algo similar al selector de nombre en una clase CSS.

Ejemplo de estilo en línea

<Text style={{color: ‘red’}}>Texto rojo</Text>

Ejemplo de estilo utilizando la función StyleSheet.create(ObjetoEstilo)

Definimos el estilo:

const styles=StyleSheet.create({
red: {color: ‘red’},
big: {fontsize: 30}
});

Utilizamos el estilo:

<Text style={styles.red}>Texto rojo</Text>

<Text style={styles.big}>Texto grande</Text>
Estilos condicionales
Utilizando el operador ternario podemos definir estilos condicionales, ya sea en línea o
utilizando la función StyleSheet.create(ObjetoEstilo), ejemplo utilizando la función.

<View style={[(this.props.isTrue)?styles.bgColorBlack:styles.bgColorWhite]}>
Aplicando varios estilos
Podemos aplicar varios estilos al pasar un arreglo de props style. Si existiera algún
conflicto el último elemento tiene precedencia

Definimos el estilo:

const styles=StyleSheet.create({
red: {color: ‘red’},
greenUnderline:{color: ‘green’, textDecoration: ‘underline’},
big: {fontsize: 30}
});

Utilizamos los estilos:

<Text style={[styles.red, styles.big]}>Texto rojo grande</Text>

<Text style={[styles.red, styles.greenUnderline]}>Texto verde subrayado</Text>
<Text style={[styles.greenUnderline}, styles.red]}>Texto rojo</Text>
<Text style={{styles.greenUnderline}, {color: ‘blue’}, styles.big}>Texto azul grande
subrayado</Text>
Flexbox
React Native provee un componente para facilitar el diseño para diferentes resoluciones
de pantallas llamado Flexbox.

Flexbox acomoda de forma predeterminada a sus componentes hijos en columna

mediante la props flexDirection con el valor column; y podemos cambiarlo a fila
estableciendo el valor de la props flexDirection a row.

flex: Define la forma en la que los elemento van a cubrir el espacio disponible en el eje
principal. El espacio es dividido de acuerdo al número de elementos que utilicen la props
flex.
Veamos un ejemplo para entender mejor el funcionamiento de la props flex. Las cajas
roja, naranja y verde son Views hijos en un contenedor View y tienen establecido la
props flex de la siguiente forma:

• View (contenedor) principal, flex: 1

• View rojo, flex: 1
• View naranja, flex: 2
• View verde, flex: 3

Por lo que tenemos 1 + 2 + 3 = 6 (total sumando los

valores de la prop flex de los Views hijos), lo que
indica que el rojo tomará 1/6, el naranja 2/6 y el verde
3/6 del espacio disponible del View principal que a su
vez tomo 1/1, es decir, todo el espacio del contenedor
padre que es toda la pantalla.
const Direction = (props)=>{
return (
<View style={styles.container}>
<View style={styles.box}/>
<View style={styles.box}/>
<View style={styles.box}/>
<View
style={{flexDirection:'row'}}>
<View
style={styles.box}/>
<View
Este código nos brinda
style={styles.box}/> un resultado como el
<View
que se muestra.
style={styles.box}/>
</View>
</View> box: {
) width: 50,
} height: 50,
margin: 10,
const styles = StyleSheet.create({ backgroundColor:
container: { ‘red’,
flex:1, }
backgroundColor: '#AED581’,});
Practiquemos un poco
Realizaremos dos aplicaciones para practicar lo que hemos visto:

• La que ilustra el uso de la props flex

• La que muestra el uso de la props flexDirection

Recuerda que se vale personalizarlas !!

Enlace a la documentación completa del componente Flexbox

https://reactnative.dev/docs/flexbox
Observamos primero el uso
del componente Dimensions
para saber la dimensión de la
ventana en la línea 5.

El uso de la props style para

dibujar un cuadro utilizando
un componente View. Líneas
12–14.

El uso de la props flex dentro

de styles. Líneas 21, 27 y 32.
Observamos el uso del estilo con
las diferentes props para dibujar
un cuadro, utilizando un
componente View. Líneas 9–11 y
13-15.

Sugerimos cambiar los valores

de la props alingItems y
observar el comportamiento de
los cuadros.

'flex-start’ 'flex-end’ 'center'

'stretch’ 'baseline’

Pueden hacer lo mismo con la

props justifyContent y sus
valores.

'flex-start’ 'flex-end’ 'center’