React Native - Configuración del entorno

Hay un par de cosas que necesita instalar para configurar el entorno para React Native. Usaremos OSX como nuestra plataforma de construcción.

No Señor.	Software	Descripción
1	NodeJS y NPM	Puede seguir nuestro tutorial de configuración del entorno NodeJS para instalar NodeJS.

Paso 1: Instale create-react-native-app

Después de instalar NodeJS y NPM correctamente en su sistema, puede continuar con la instalación de create-react-native-app (globalmente como se muestra a continuación).

C:\Users\Tutorialspoint> npm install -g create-react-native-app

Paso 2: crear proyecto

Navegue por la carpeta requerida y cree un nuevo proyecto nativo de reacción como se muestra a continuación.

C:\Users\Tutorialspoint>cd Desktop
C:\Users\Tutorialspoint\Desktop>create-react-native-app MyReactNative

Después de ejecutar el comando anterior, se crea una carpeta con un nombre específico con el siguiente contenido.

Paso 3: NodeJS Python Jdk8

Asegúrese de tener Python NodeJS y jdk8 instalados en su sistema, si no, instálelos. Además de estos, se recomienda instalar la última versión de hilo para evitar ciertos problemas.

Paso 4: Instale React Native CLI

Puede instalar la interfaz de línea de comandos nativa de reacción en npm, utilizando el comando install -g react-native-cli como se muestra a continuación.

npm install -g react-native-cli

Paso 5: Comience a reaccionar nativo

Para verificar la instalación, navegue por la carpeta del proyecto e intente iniciar el proyecto con el comando de inicio.

C:\Users\Tutorialspoint\Desktop>cd MyReactNative
C:\Users\Tutorialspoint\Desktop\MyReactNative>npm start

Si todo salió bien, obtendrá un código QR como se muestra a continuación.

Según las instrucciones, una forma de ejecutar aplicaciones nativas de reacción en su dispositivo Android es usar expo. Instale el cliente expo en su dispositivo Android y escanee el código QR obtenido anteriormente.

Paso 6: expulsar el proyecto

Si desea ejecutar el emulador de Android usando Android Studio, salga de la línea de comando actual presionando ctrl+c.

Luego, ejecuta ejecutar eject command como

npm run eject

Esto le indica opciones para expulsar, seleccione la primera con las flechas y presione Intro.

Luego, debe sugerir el nombre de la aplicación en la pantalla de inicio y el nombre del proyecto de los proyectos de Android Studio y Xcode.

Aunque su proyecto se expulsó correctamente, es posible que obtenga un error como:

Ignore este error y ejecute react native para Android usando el siguiente comando:

react-native run-android

Pero, antes de eso, debes instalar Android Studio.

Paso 7: Instalación de Android Studio

Visite la pagina web https://developer.android.com/studio/ y descarga Android Studio.

Después de descargar el archivo de instalación, haga doble clic en él y continúe con la instalación.

Paso 8: Configurar AVD Manager

Para configurar el AVD Manager, haga clic en el icono correspondiente en la barra de menú.

Paso 9: Configurar AVD Manager

Elija una definición de dispositivo, es recomendable Nexus 5X.

Haga clic en el botón Siguiente y verá una ventana de Imagen del sistema. Selecciona elx86 Images lengüeta.

Luego, seleccione Marshmallow y haga clic en siguiente.

Finalmente, haga clic en el botón Finalizar para finalizar la configuración de AVD.

Después de configurar su dispositivo virtual, haga clic en el botón de reproducción debajo de la columna Acciones para iniciar su emulador de Android.

Paso 10: ejecutar Android

Abra el símbolo del sistema, navegue por la carpeta de su proyecto y ejecute el react-native run-android mando.

Luego, la ejecución de la aplicación comienza en otro mensaje, puede ver su estado.

En su emulador de Android, puede ver la ejecución de la aplicación predeterminada como:

Paso 11: propiedades locales

Abre el android carpeta en la carpeta de su proyecto SampleReactNative/android(en este caso). Crea un archivo con nombrelocal.properties y agregue la siguiente ruta en él.

sdk.dir = /C:\\Users\\Tutorialspoint\\AppData\\Local\\Android\\Sdk

aquí, reemplazar Tutorialspoint con su nombre de usuario.

Paso 12: recarga en caliente

Y para crear la aplicación, modifique App.js y los cambios se actualizarán automáticamente en el emulador de Android.

De lo contrario, haga clic en el emulador de Android presione ctrl+m luego, seleccione Enable Hot Reloading opción.