DanteCervantes.com

Streaming con React Native (iOS / Android)

Publicado por : Dante | 15 agosto, 2017 | 2:33 pm

 

Hola que tal, después de mucho alejarme, por cuestiones de trabajo, he vuelto, trayéndoles un tutorial de como crear su propio reproductor de streaming en React Native.

Lo que veremos hoy será:

  • Módulos Nativos
  • Enlazar los módulos Nativos con Javascript en React Native

Módulos Nativos (Native Modules)

Un módulo nativo es aquél que permite realizar una conexión entre las funciones nativas del dispositivo (Cámara, Audio, Fotos, Sensores, Mapas, Transiciones, etc), y React Native, es gracias a este método que existen grandes módulos como :

  • React Native Maps (https://github.com/airbnb/react-native-maps)
  • React Native Get Music Files (https://github.com/cinder92/react-native-get-music-files)

y muchos más.

En la documentación de React Native se explica cómo comenzar, aquí lo resumiremos.

Este tutorial da por hecho que, ya cuentas con un proyecto de React Native.

Android

En la carpeta

Crea dos carpetas, una llamada modules y otra packages, dentro de la carpeta modules, crea un archivo llamado AudioStream.java.

Copia y pega el siguiente código.

Como podemos observar es muy parecido a una clase normal en Java, sin embargo este módulo extiende de ReactContextBaseJavaModule, que es aquél que permite realizar la comunicación entre el código nativo y Javascript.

Todos los métodos que serán invocados a través de Javascript deben llevar un “alias” @ReactMethod.

El código en Java es bastante simple, se pueden utilizar librerías de terceros o las que Android ofrece.

En la carpeta packages, crea una archivo llamado MyAppPackages.java con el siguiente código.

De esta forma mantenemos ordenado y legible nuestro código.

El archivo MainApplication.java queda de esta forma

En este archivo lo que hacemos es inicializar los paquetes al momento de que la aplicación arranque.

iOS

En iOS, las cosas son un poco distintas, las más notables son.

en Java -> @ReactMethod != en iOS -> RCT_EXPORT_METHOD

para ello necesitamos dos archivos.

  • AudioStream.h
  • AudioStream.m

Abre el proyecto de React Native con Xcode y dentro de la carpeta que lleva el mismo nombre que tu aplicación.

Crea esos dor archivos.

AudioStream.h

AudioStream.m

Una vez teniendo los módulos nativos creados pasamos a crear nuestro componente.

React Native

Conclusión

De esta manera podemos observar que es de una manera muy sencilla, React Native nos permite extender la funcionalidad de nuestra aplicación, y el límite, es tu imaginación.

Recibe los mejores desarrollos y tutoriales

* campos requeridos

redes sociales