Compartir a través de

Introducción al desarrollo para Android mediante React Native

  • Artículo

Esta guía le ayudará a empezar a usar React Native en Windows para crear una aplicación multiplataforma que funcione en dispositivos Android.

Información general

React Native es un marco para aplicaciones móviles de código abierto creado por Facebook. Se usa para desarrollar aplicaciones para Android, iOS, Web y UWP (Windows) y proporciona controles de interfaz de usuario nativa y acceso completo a la plataforma nativa. Trabajar con React Native requiere un conocimiento de los aspectos básicos de JavaScript.

Empezar a trabajar con React Native mediante la instalación de las herramientas necesarias

  1. Instale Visual Studio Code (o el editor de código que prefiera).

  2. Instale Android Studio para Windows y establezca la variable de entorno ANDROID_HOME. Siga las instrucciones de Set Up Your Environment - React Native (Configurar su entorno: React Native). Asegúrese de establecer la selección del sistema operativo de desarrollo en "Windows" y la selección del sistema operativo de destino en Android.

  3. Establezca la variable de entorno JAVA_HOME. La herramienta Gradle que se usa para compilar aplicaciones android requiere un requisito de versión específico para el SDK de Java. Para encontrar la versión compatible, en Android Studio, vaya a Configuración-Compilación, Ejecución, Herramientas de implementación-compilación-Gradle>>.> Anote la ruta de acceso seleccionada en la lista desplegable Gradle JDK . Establezca la variable de entorno JAVA_HOME en esta ruta de acceso mediante los pasos siguientes:

    • En el menú de búsqueda de Windows, escriba: "Editar las variables de entorno del sistema"; se abrirá la ventana Propiedades del sistema.
    • Elija Variables de entorno... y, a continuación, elija Nuevo... en Variables de usuario.
    • Establezca el nombre de variable en JAVA_HOME y el valor en la ruta de acceso que recuperó de Android Studio.

  4. Instale NodeJS para Windows. Es posible que quiera considerar el uso del administrador de versiones de Node (nvm) para Windows si va a trabajar con varios proyectos y versiones de NodeJS. Se recomienda instalar la versión LTS más reciente para los proyectos nuevos.

Nota

También puede considerar la posibilidad de instalar y usar el Terminal Windows para trabajar con su interfaz de la línea de comandos (CLI) preferida, así como Git para el control de versiones. El JDK de Java viene empaquetado con Android Studio v2.2+, pero si necesita actualizar el JDK por separado de Android Studio, use el Instalador para Windows x64.

Creación de un nuevo proyecto con React Native

  1. Use npx, la herramienta del ejecutor de paquetes que se instala con npm, para crear un nuevo proyecto de React Native. desde el símbolo del sistema de Windows, PowerShell, Terminal Windows o el terminal integrado de VS Code (Ver > Terminal integrado).

    npx react-native init MyReactNativeApp

    Si desea iniciar un nuevo proyecto con una versión específica de React Native, puede usar el argumento --version. Para obtener información sobre las versiones de React Native, consulte Versiones: React Native.

    npx react-native@X.XX.X init  <projectName> --version X.XX.X

  2. Abra el nuevo directorio "MyReactNativeApp":

    cd MyReactNativeApp

  3. Si desea ejecutar el proyecto en un dispositivo Android de hardware, conecte el dispositivo al equipo con un cable USB.

  4. Si desea ejecutar el proyecto en un emulador de Android, no debe realizar ninguna acción, ya que Android Studio se instala con un emulador predeterminado instalado. Si desea ejecutar la aplicación en el emulador para un dispositivo determinado, haga clic en el botón AVD Manager (Administrador de AVD) en la barra de herramientas.

    Captura de pantalla del botón del administrador de AVD.

  5. Para ejecutar el proyecto, escriba el siguiente comando. Se abrirá una nueva ventana de consola que muestra el empaquetador Metro de Node.

    npx react-native run-android

    Captura de pantalla del empaquetador Metro en una ventana de consola

    Captura de pantalla de la aplicación de React Native en ejecución en un emulador de Android

    Nota

    Si usa una nueva instalación de Android Studio y aún no ha realizado ningún otro desarrollo de Android, puede que reciba errores en la línea de comandos al ejecutar la aplicación sobre la aceptación de licencias para Android SDK. Por ejemplo, "Advertencia: no se acepta la licencia para el paquete de la plataforma 29 del SDK de Android". Para resolver esto, puede hacer clic en el botón Administrador de SDK en Android Studio Captura de pantalla del botón Administrador de SDK. O bien, puede enumerar y aceptar las licencias con el siguiente comando y asegurarse de usar la ruta de acceso a la ubicación del SDK en el equipo.

    C:\Users\[User Name]\AppData\Local\Android\Sdk\tools\bin\sdkmanager --licenses

  6. Para modificar la aplicación, abra el directorio del proyecto MyReactNativeApp en el IDE de su elección. Se recomienda VS Code o Android Studio.

  7. La plantilla de proyecto creada por react-native init usa una página principal llamada App.js. Esta página se rellena previamente con una gran cantidad de vínculos útiles a información sobre el desarrollo con React Native. Agregue texto al primer elemento Text, como la cadena "HELLO WORLD!" (Hola mundo) que se muestra a continuación.

    <Text style={styles.sectionDescription}>
  Edit <Text style={styles.highlight}>App.js</Text> to change this
  screen and then come back to see your edits. HELLO WORLD!
</Text>

  8. Vuelva a cargar la aplicación para mostrar los cambios realizados. Hay varias maneras de hacerlo.

    • En la ventana de la consola del empaquetador Metro, escriba "r".
    • En el emulador de dispositivos Android, pulse dos veces "r" en el teclado.
    • En un dispositivo Android de hardware, agite el dispositivo para abrir el menú de depuración de React Native y seleccione "Volver a cargar". Captura de pantalla del menú de depuración de React Native