Hola a todos bienvenidos a este tutorial soy Jorge, en esta ocasión quiero compartirles como hacer un ‘run’ de nuestra app desde react-native en un emulador de android.
- Para empezar a crear nuestro proyecto debemos tener en cuenta ciertos factores antes de crear nuestra aplicación.
Vamos a nuestra terminal y escribimos el siguiente comando.
java --version
El resultado que deberías obtener es uno similar al de la imagen de abajo.

Ahora instalaremos Android Studio https://developer.android.com/studio/index.html , una vez realizada la instalación encontraremos una ventana de inicio como esta.

Haremos click en el boton de que encontramos en la parte inferior.
Al hacer click se desplegara un menu donde seleccionaremos la opcion de la imagen de abajo.
Ahora nos aparecera unas opciones para configurar nuestro entorno, selecciona Android 6.0 (Marshmallow)
y activa la opción en la parte inferior.

Activa las casillas que ves en la imagen.

De igual modo pasaremos a la pestaña de y buscaremos que este activa la siguiente opción

Una vez tengamos todo listo ahora si podemos darle click al botón de aplicar [Apply]
- Para crear nuestro proyecto volvemos a la terminal y con el siguiente código dentro de la ruta que desees se instalaran los componentes necesarios.
react-native init TuProyecto
una vez finalizada la instalación debemos entrar a la ruta donde se creo que proyecto.
cd TuProyecto
- antes de ejecutar nuestro comando para iniciar nuestro emulador debemos instalar uno a diferencia de IOS que viene con Xcode nosotros tendremos que hacer este paso manualmente te recomiendo que descargues e instales Genymotion https://www.genymotion.com/download/ y una vez la instales selecciona un dispositivo con la versión de android similar a la que configuramos en Android Studio, ahora si deseas trabajar sobre Android 7.0 o superiores realiza el mismo paso para estas versiones.

Como puedes observar en la imagen de arriba he seleccionado un Galaxy S8 con Android 7.0 debemos dar click en y en pocos segundos tendremos funcionando nuestro emulador.

- Regresando a nuestra terminal y donde de nuestra carpeta donde creamos nuestro proyecto deberíamos ver algo similar a la imagen de abajo.

En este ejemplo podemos ver que se llama SansMusic y dentro de ella los archivos de instalación a diferencia de los videos del curso si te preguntas dónde están **index.android.js y index.ios.js ** para la versión de react-native :

el archivo index.js ya trae incluido a los dos archivos :
import { AppRegistry } from 'react-native';
import App from './App';
AppRegistry.registerComponent('SansMusic', () => App);
Como puedes ver se hace un import al componente App que se encuentra en el mismo directorio y este contiene la información que se va renderizar dependiendo de si es Android o IOS
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' +
'Cmd+D or shake for dev menu',
android: 'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit App.js
</Text>
<Text style={styles.instructions}>
{instructions}
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
- Regresando a nuestra terminal vamos a ejecutar el siguiente comando :
react-native run-android
posiblemente vamos a tener el siguiente error :

y esto sucede por problemas de compatibilidad con react, cuando buscas como solucionar este problema en internet en la mayoría de respuestas te dicen que debes hacer un downgrade o bajar de version, pero esto puede llegar a ser muy tedioso y podemos llegar a dañar archivos de nuestra computadora.
- Java nos permite trabajar con varias versiones solo debemos indicarle con cual queremos trabajar, y ¿cómo hacemos esto ? , pues bien con el siguiente comando le indicaremos esto a Java :
export JAVA_HOME=$(/usr/libexec/java_home -v 1.8)
si ejecutamos de nuevo el comando para ver la version de nuestro java deberíamos obtener algo similar a la imagen de abajo.

ahora si volvemos a correr nuestro comando :
react-native run-android
Obtendremos :

Funciona 😄 podemos ver que quedo instalada en nuestro emulador de Galaxy S8 finalmente veamos como se ve en nuestro emulador:.
Espero que este tutorial les fuera de ayuda y ti tienen alguna duda pueden dejarla en la sección de comentarios.
Bye :V
Curso de React Native 2016