Índice del curso de ReactJS

  1. Instalación y configuración inicial
  2. Estructura básica de un proyecto con ReactJS
  3. JSX
  4. Recogida de datos
  5. State
  6. Componentes
  7. Props
  8. Renderizado condicional
  9. Arrays
  10. Style
  11. Valor por defecto de una combo
  12. React router
  13. Fetch API
  14. Context API
  15. Login
  16. Redux
  17. React Developer Tool
  18. Sockets
  19. Build
  20. TypeScript
  21. React Native
  22. Expo
  23. React native
  24. Navigation
  25. Compilar con Expo en la nube
  26. Create React App
  27. Compartir código entre React Web y React Native. Dos aproximaciones:
    1. Empaquetar con NPM
    2. Importar código desde fuera del proyecto pero en el propio ordenador
    3. Importar código con prototype

Crear una aplicación con react native

Para crear nuestras aplicaciones para React Native tenemos dos opciones oficialmente soportadas por facebook: Expo y Create React App (https://facebook.github.io/react-native/docs/getting-started).

La diferencia de React Native con React se refiere sólo a la capa de presentación. React Native tiene varios de componentes específicos para desarrollo móvil.

Estas dos herramientas nos permiten crear cómodamente una aplicación con React Native en la que todo está configurado y listo para empezar a modificar.

React native

Instalar React Native

Instalar react nativenpm install -g react-native-cli
Crear un proyecto con react nativereact-native init pruebaReactNative

Tras crear nuestro proyecto React, podemos abrir la carpeta Android del mismo con Android Studio.

Ejecutar nuestra aplicación

Debemos crear el fichero local.properties:

./android/local.propertiessdk.dir = /home/monty/Android/Sdk
sudo react-native run-android

En linux, si intentaba lanzar la aplicación después de que el ordenador hubiese entrado en modo suspensión, no se lanzaba, y obtenía un error.

Para lanzar el emulador sin abrir el android studio:

cd ~/Android/Sdk/tools/bin
emulator -list-avds // este comando muestra los teléfonos instalados
cd ~/Android/Sdk/tools/
emulator -avd nexus // he renombrado el nombre por defecto que el avd manager le da al dispositivo y lo he llamado nexus para que sea más fácil de escribir

En mi caso, una vez sé el nombre del dispositivo, podría ejecutar:

/home/monty/Android/Sdk/tools/emulator -avd nexus

React Native Dev Tool

Mostraremos su menú pulsando CTRL + M

En una versión de linux no me funcionó, así que en la terminal ejecuté:

adb shell input keyevent 82
Dev Mode Android Native

Desde aquí podemos:

  • Refrescar el emulador con los últimos cambios (R + R, o reload)
  • Enable Hot Reloading y Enable Live Reload
    • No debes tener la opción Enable Hot Realoading habilitada si tienes la opción Enable Live Reload habilitada. Hacen conflicto.
    • Por regla general, sólo habilitaremos la opción Enable Live Reload en lugar de la Enable Hot Realoading.
  • Ver los logs de la aplicación desde chrome (Remote JS Debugging)

Añadiendo los códigos anteriores al package.json


  "scripts": {
  	...
    "start": "node node_modules/react-native/local-cli/cli.js start &
 /home/monty/Android/Sdk/tools/emulator -avd nexus & sudo react-native run-android",
    "panel": "/home/monty/Android/Sdk/platform-tools/adb shell input keyevent 82"
  
    ...
  }
  

El plugin npm scripts de egamma para Visual Studio Code permite ejecutar un script del package.json haciendo click sobre él.

A veces un servicio de nodejs se queda abierto y no permite volver a desplegar otro en el mismo puerto. Podemos cerrar todos los servicios de nodejs ejecutando el comando:

killall node

Configuración importante para mejorar el flujo de trabajo desde el Android Studio

Para deshabilitar Enable Hot Reloading por defecto:

  1. Abrimos Android Studio
  2. File -> Settings ->
    1. HotSwap -> Dehabilitamos Enable hot-swap agent for Groovy code
    2. Instant run -> Enable instant run to hot swap code/resource changes on deploy (default enabled)
  3. Android Virtual Device Manager -> En uno de los emuladores pulsamos sobre la flechita que apunta hacia abajo -> Wipe data (por si hubiese quedado guardada una configuración diferente de la que acabamos de establecer).

Para ejecutar siempre el dispositivo en Cold Boot

  1. Abrimos el Android Studio.
  2. Vamos al Android Virtual Device Manager.
  3. Pulsamos en el lápiz del dispositivo que queremos editar.
  4. Show advanced Settins
  5. Emulated Performance -> Boot Option: Cold Boot

Componente inicial

import React from 'react';
import { View, Text, Button } from 'react-native';

const btnPulsado = _ => {
  alert(111);
}

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Restaurant Review </Text>
      <Text style={styles.title}>Restaurant Review </Text>
      <Button title="Botón" onPress={btnPulsado}/>
    </View>
  );
};

export default App;

Componentes de react native

  • Equivalente a los div de HTML. Sirve para agrupar componentes.
    <View><View>
  • <Button title="Cerrar" onPress={ () => {btnPulsado()}}/>
  • <Text>El texto<Text>
  • FlatList / mainList (listas de elementos)
  • AsyncStorage (equivalente a localStorage)
  • const imagen = require ('./images/picture.jpg');
    <Image source={imagen} />
    
    //Con la imagen podríamos usar los situientes estios:
    imgExplicacion:{
    	width: '100%',
    	resizeMode: 'contain'
    }
  • Cargar un combo desplegable:
    <Picker style={styles.container} 
      selectedValue={microCicloActivo}
      onValueChange={valor => setValor(valor)}>
        <Picker.Item key=0 value=0 label="titulo 0"/>
        <Picker.Item key=1 value=1 label="titulo 1"/>
        <Picker.Item key=2 value=2 label="titulo 2"/>
    </Picker>
  • Cargar un cuadro de diálogo. Cargaremos una librería externa para hacerlo.

Estilos

En React Native es como si todos los elmentos tuviesen aplicado el estilo css display:flex por defecto.

const App = () => {
	return (
		<View style={styles.wrapper}>
			<View style={styles.container}>
			<Text style={styles.col}>COL1</Text>
			<Text style={styles.col}>COL2</Text> 
		</View>
		<Text style={styles.fila_abajo}>FILA ABAJO</Text>
	</View>
	);
};d

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'orange',
    flexDirection: 'row',
    justifyContent: 'center',//flex-start, flex-end
  },
  col: {
    fontSize:30,
    borderColor:'black',
    borderWidth:3,
    padding:20
  },
  wrapper:{
    height: '100%',
    backgroundColor:'pink',
    flexDirection:'column',
    justifyContent: 'space-between'

  },
  fila_abajo: {
    textAlign:'center',
    backgroundColor:'green'
  }
});
styles en react native
Descargar ejemplo estilos React Native
icono de mandar un mail¡Contacta conmigo!
Pablo Monteserín
contacta conmigoPablo Monteserín

Para dudas técnicas sobre los ejercicios de mis cursos es necesario estar suscrito.