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.
Vamos a nuestra terminal y escribimos el siguiente comando.
java --versionEl 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]
react-native init TuProyecto
una vez finalizada la instalación debemos entrar a la ruta donde se creo que proyecto.
cd TuProyecto
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.
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 = {};
exportdefaultclassAppextendsComponent<Props> {
render() {
return (
<Viewstyle={styles.container}><Textstyle={styles.welcome}>
Welcome to React Native!
</Text><Textstyle={styles.instructions}>
To get started, edit App.js
</Text><Textstyle={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,
},
});
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.
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
