Primeros pasos con React Native

14 de junio del 2017
|Por Yoné Rocha

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

1. 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.

1.1. Preparar el entorno de trabajo

  • Instalar las utilidades para línea de comandos de React Native:
    Shell
    1
    npm install -g create-react-native-app

1.2. Pasos a seguir para crear un nuevo proyecto

  • Crear nuestra primera aplicación:
    Shell
    1
    create-react-native-app HelloWorldReactNative
  • Iniciar el servidor de desarrollo para nuestra app:
    Shell
    1
    2
    cd HelloWorldReactNative
    npm start #Genera un código qr y dirección para conectarnos desde el dispositivo, explicado en el siguiente paso
  • 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:
    Shell
    1
    2
    npm run android
    npm run ios

2. 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.

2.1. 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:
    Shell
    1
    2
    3
    export ANDROID_HOME=$HOME/Library/Android/sdk
    export PATH=$PATH:$ANDROID_HOME/tools
    export PATH=$PATH:$ANDROID_HOME/platform-tools
  • 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.
    Shell
    1
    brew install watchman
  • Administrador de dependencias. No está de más tenerlo para proyectos con dependencias.
    Shell
    1
    brew install yarn
  • Instalar el cliente nativo para React Native:
    Shell
    1
    npm install -g react-native-cli

2.2. Pasos a seguir para crear un nuevo proyecto

  • Crear nuestra primera aplicación con código nativo:
    Shell
    1
    react-native init HelloWorldReactNativeWithNativeCode
  • Iniciar el servidor de desarrollo para nuestra app:
    Shell
    1
    2
    3
    4
    5
    cd HelloWorldReactNativeWithNativeCode
    react-native run-ios #Ejecutar en simulador iOS
    # ó
    react-native run-android #Ejecutar en dispositivo virtual Android o en una máquina virtual Genymotion (Preferible esto último por rendimiento)
    # Si es Genymotion, iniciar máquina virtual antes de ejecutar este comando
  • Configurar ESLint en nuestro proyecto.

3. Tips

3.1. 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.

3.2. 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:

Shell
1
npm run eject

3.3. 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.

3.4. 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:

1
2
3
4
5
6
7
8
9
10
11
<key>NSAppTransportSecurity</key>
<dict>
<key>NSExceptionDomains</key>
<dict>
<key>mi_dominio.com</key>
<dict>
<key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
</dict>

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

1
2
3
4
<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key><true/>
</dict>

3.5. Incluir tipografías personalizadas

  1. Añadir las tipografías que vayamos a usar al directorio /assets/fonts/. Si no existiera lo creamos.
  2. Editar el archivo package.json añadiendo las siguientes líneas a la raíz del JSON:
    Shell
    1
    2
    3
    4
    5
    "rnpm": {
        "assets": [
          "./assets/fonts/"
        ]
      }
  3. Ejecutar, en la Terminal, el siguiente comando:
    Shell
    1
    react-native link
  4.  Ya podríamos usar las tipografías en React Native. Podemos comprobar que se han añadido al info.plist de iOS  y en /app/src/main/assets/fonts para Android.

3.6. Generar APK (Android)

Instalar en el dispositivo para debug:

  1. Conectar, por USB al ordenador, el dispositivo con la depuración USB habilitada.
  2. react-native run-android

APK firmado (Signed realease):

  1. Hacer los pasos que indica la documentación oficial para firmar un APK.
  2. cd android && ./gradlew assembleRelease

Fuentes consultadas: React Native Getting Started Guide, Running on device

macOS Node.js React Native Xcode