Primeros pasos con React Native

Describiré los dos métodos para crear una app con React Native. Suponiendo que estamos en un entorno bajo macOS, en otros sistemas es muy similar el proceso.

Dependencias mínimas en macOS

  • Xcode.
  • Homebrew. Para instalar Node.
  • Node/NPM
  • Watchman. Observa los cambio en los archivos de nuestro proyecto, para refrescar la app en tiempo real.
  • RN Cli. React Native Command Line interface.

Proyecto con Create React Native App

Es un método sencillo para empezar un proyecto React Native, no es necesario tener Xcode o Android Studio, ya que se ejecuta nuestra app en un entorno llamado Expo, que cuenta con las APIs más comunes de iOS y Android.

Preparar el entorno de trabajo

Pasos a seguir para crear un nuevo proyecto

  • Crear nuestra primera aplicación:
  • Iniciar el servidor de desarrollo para nuestra app:
  • Instalar app Expo en nuestro dispositivo Android o iOS. Escaneamos el código qr o introducir la url en Expo para mostrar la app en el dispositivo.
  • Si queremos lanzar la app en el dispositivo virtual de Android, en una máquina virtual Genymotion o en el simulador de iOS, se entiende que se ha instalado Xcode y/o Android Studio:

Proyecto con código nativo

Con este método tendremos nuestro código React acompañado del proyecto nativo en XCode para iOS y/o en Java para Android. Pudiendo acceder a estos como cualquier app nativa. Muy similar a como podemos trabajar en Xamarin, con Xamarin Forms y código nativo.

Preparar el entorno de trabajo

  • Instalar XCode y/o Android Studio.
  • Asegurarnos, en el caso de Android Studio, tener las variables de entorno definidas en ~/.bash_profile:
  • Instalar Node.js, como ya se explicó más arriba.
  • Instalar Watchman. Para que se recargue la ejecución de la app cuando se detectan cambios en los archivos fuentes.
  • Administrador de dependencias. No está de más tenerlo para proyectos con dependencias.
  • Instalar el cliente nativo para React Native:

Pasos a seguir para crear un nuevo proyecto

  • Crear nuestra primera aplicación con código nativo:
  • Iniciar el servidor de desarrollo para nuestra app:
  • Configurar ESLint en nuestro proyecto.

Tip: Opciones en dispositivo/Simulador

  • En iOS:
    • Recargar app con los cambios realizados en el código fuente: Cmd + r
    • Menú de desarrollo: Cmd + d
  • En Android:
    • Recargar app: Pulsar dos veces la tecla R, si estamos en emulador, o desde el menú de desarrollo en el dispositivo físico.
    • Menú de de desarrollo: Botón menú del dispositivo.

Migrar desde Create React Native App a un proyecto con código nativo

El siguiente comando funciona de manera similar a react-native init, creando el proyecto nativo para iOS y Android:

Ejecutar en dispositivo físico

Sólo es posible ejecutar en dispositivos físicos con proyectos React Native con código nativo.

En Android:

  • Activar modo depuración en el dispositivo: Ajustes -> Información del teléfono -> Número de compilación (Pulsar 7 veces).
  • Ir a Opciones de desarrollador -> Depuración por USB (Activar).
  • En el caso de de tener un dispositivo MI (MIUI) desactivar “Activar optimización MIUI” en Opciones de desarrollo. Si está activo no se instalará nuestra app.
  • Conectar el dispositivo por USB al ordenador.
  • Ejecutar el comando react-native run-android.

En iOS, el método es igual que con una app nativa:

  • Abrir el .xcodeproj de nuestro proyecto iOS.
  • Configurar la firma del código con nuestro Apple Developer.
  • Seleccionar el dispositivo físico y ejecutar.

Activar App Transport Security para iOS

En el caso de que usemos servicios, como API REST, debemos indicar el dominio en el info.plist de nuestro proyecto Xcode:

Si necesitáramos permitir cualquier dominio, sería así (No es lo recomendable):

 

 

Fuente consultada: React Native Getting Started Guide, Running on device