React Native

Permite crear aplicaciones móviles nativas con React

La diferencia de React Native con React es que trae un montón de componentes nuevos para usar en nuestras aplicaciones móviles:

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>
  • Picker
    <Picker selectedValue={objActivo} onValueChange={valor => setMicroCicloActivo(valor)}>
    	{ rutines.map((obj, i) => <Picker.Item key={i} value={obj} label={obj.titulo}/>) }
    </Picker>
  • FlatList / mainList (listas de elementos)
  • Touchable (manejan los taps del teléfono)
  • Animated (para animar interfaces)
  • fetch (funciones asíncronas)
  • Platform (identifica si es iOS o Android)
  • 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 => setMicroCicloActivo(valor)}>
        {
          rutines.map((obj, i) => <Picker.Item key={i} value={obj} label={obj.titulo}/>)
        }
    </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.