Mis primeros pasitos con React Native

Introducción

Aparentemente la manera mas simple de empezar a estudiar React Native es utilizando la aplicación create-react-native.  A continuación se explican los pasos necesarios para explorar una primera aplicación estilo hola mundo.

Es de aclarar que actualmente estoy utilizando ArchLinux así que la instalación de los paquetes variará dependiendo de que distribución se utilice finalmente.

Instalación del software

Se requiere de la instalación de NodeJS con NPM, la aplicación create-react-native y watchman.

$ sudo pacman -S nodejs npm

$ sudo npm install -g create-react-native-app

$ sudo npm -g install watchman

Acerca de NPM versión 5

La versión 5.x de NPM no es soportada actualmente, al parecer aún contiene algunos bugs que la hacen incompatible con React Native por ahora.  Desafortunadamente dicha versión es la disponible el repositorio de ArchLinux por lo que fue necesario hacer un downgrade d de la misma.  Para hacer esto se siguieron los pasos mostrados a continuación.

Se identificaron las versiones disponibles de la versión 4.x de NPM.

$ npm view npm time
 
{ modified: '2017-10-13T18:58:10.523Z',
  created: '2013-07-12T18:32:48.902Z',
....
 '4.4.4': '2017-03-16T23:58:25.697Z',
 '4.5.0': '2017-03-24T23:41:03.141Z',
 '4.6.0': '2017-04-22T01:14:41.527Z',
 '4.6.1': '2017-04-22T02:22:52.453Z',
...
 '5.4.1': '2017-09-06T22:46:36.708Z',
 '5.4.2': '2017-09-15T00:49:48.269Z',
 '5.5.0': '2017-10-04T09:34:11.789Z',
 '5.5.1': '2017-10-04T16:49:45.575Z' }

Se decidió instalar la versión 4.6.1 para esta ocasión.

$ sudo npm -g install npm@4.6.1

Creación y ejecución de un proyecto

Para crear un nuevo proyecto: HelloWorld en este caso, se deberá ejecutar el siguiente comando.

$ create-react-native-app HelloWorld

Para probar la aplicación es necesario ubicarse en el directorio de trabajo e iniciar el servidor de desarrollo.

$ cd HelloWorld
$ npm start

Una vez hecho esto, aparecerá en la consola un código QR para ser escaneado con la aplicación móvil que conectará al teléfono o tableta con el servidor de desarrollo y le permitirá probar la aplicación publicada.  Para que esto sea posible, tanto el móvil como el equipo de desarrollo deberán estar ubicados en la misma red.

Para personalizar el código de la aplicación, se deberá modificar el archivo App.js del proyecto.

Otras opciones de ejecución

$ npm start Inicia el servidor de desarrollo para ser conectado con la aplicación de Expo mediante el código QR.
$ npm run ios Inicia el servidor de desarrollo y carga la aplicación en un emulador de iOS.  Esta opción requiere de un Mac y XCode.
$ npm run android Inicia el servidor de desarrollo y carga la aplicación en un dispositivo Android conectado al equipo o en un emulador disponible.  Requiere de las Android build tools.
$ npm test Inicia la ejecución de las pruebas de software.
$ npm run eject Remueve esta herramienta y copia las dependencias de construcción, archivos de configuración y scripts en el directorio de la aplicación.   Esta acción es irreversible.

Instalación de la aplicación móvil

Como complemento al servidor de desarrollo se deberá instalar la aplicación Expo para visualizar en el móvil, en tiempo de ejecución la aplicación que se está desarrollando.

Esta aplicación se llama Expo y puede ser instalada para Android e iOS.  También es posible desarrollar aplicaciones con React Native con la ayuda de este software desde web.

Desventajas

El uso de la aplicación Create React Native parece simplificar el proceso de crear los proyectos en su etapa inicial y de realizar las pruebas de funcionamiento mientras se desarrolla la aplicación, sin embargo no permite que esta contenga código nativo (solamente Javascript) ni que sea compilada directamente a una plataforma nativa como Android o iOS.  Para esto último se deberá remover del proyecto (ver eject) o utilizar la ayuda de la aplicación de exp

Recursos

  1. React Native
    https://facebook.github.io/react-native/
  2. Create React Native App
    https://github.com/react-community/create-react-native-app

Leave a Reply