¿Cómo construir un puente React Native Android?

Cuando se usa React Native para escribir aplicaciones móviles, JavaScript es el lenguaje de programación principal. Sin embargo, a veces, es posible que desee llamar a una API de plataforma que no sea compatible con el componente React Native existente o usar una biblioteca de Android de terceros. En estos casos, debe escribir código nativo para puentear con Android Studio y Xcode. En este artículo, demostraré paso a paso cómo crear un módulo React Native Bridge más simple.

Requisitos para compilar el paquete para ReactNative

  • Android Studio
  • CLI React-Native
  • Nodo

Estamos creando un puente / paquete para React Native para acceder a Toast (desde Android Native) usando JavaScript.

Para crear cualquier paquete primero, necesitamos configurar la estructura de directorios básica, así que, creemos la estructura de directorios de la siguiente manera

1. Crear directorio de paquetes:

mkdir react-native-android-toast

2. Ejecute el siguiente comando para iniciar el paquete

cd react-native-android-toast
npm init

Cuando ejecute npm init, le preguntará sobre el paquete. Ingrese toda la información relacionada con el paquete y creará el archivo package.json.

Ahora debe crear un directorio de Android y un archivo index.js.

  • El directorio de Android contendrá todo el código java / nativo.
  • El archivo index.js es nuestro punto de entrada para el paquete, ya que hemos mencionado en el archivo package.json, también este archivo crea el puente entre Javascript y Android.

Una vez que el directorio básico está configurado, ahora tenemos que configurar el Android para escribir código Java / nativo. Crear la estructura del directorio de Android como se muestra a continuación.

  • AndroidManifest.xml: el archivo de manifiesto para una aplicación de Android es un archivo de recursos que contiene todos los detalles que necesita el sistema Android sobre la aplicación.

ToastModule.java:

  • ToastModule extiende la clase ReactContextBaseJavaModule e implementa la funcionalidad requerida por JavaScript.
  • Todos los métodos React se escribirán como @ReactMethod, hemos creado el método show () al que vamos a acceder desde javascript.
  • Si desea crear la mayor cantidad de métodos posibles, solo tiene que escribir @ReactMethod antes de que la definición del método como React comprenda que este método se invocará desde JavaScript.

ToastPackage.java

ToastPackage se utiliza para registrar el módulo. Simplemente copie el código en su archivo ToastPackage.java y cámbielo según sus requisitos.

Index.js

Este archivo se utiliza para envolver el módulo nativo en un módulo de JavaScript.

NativeModule es una clase Java que generalmente extiende la clase ReactContextBaseJavaModule e implementa la funcionalidad requerida por JavaScript.

Esto se usa básicamente para llamar a nuestro módulo desde javascript.

Hasta ahora, hemos configurado con éxito el puente de comunicación de Android y JavaScript.

¿Cómo usar este paquete en nuestro proyecto?

Crear un proyecto React Native: ejemplo react-native init

Dado que todos los módulos de nodo deben instalarse en {React Native project} \ node_modules \.

Simplemente agregue el nombre del directorio de su paquete en el archivo package.json de React Native y la ruta de su paquete y ejecute el siguiente comando para usar en su proyecto.

npm install
enlace reaccionar nativo

El comando react-native link vinculará su paquete al proyecto y estará listo para acceder a la tostada desde javascript.

Ahora solo importe ese paquete en su archivo JS donde desea mostrar el brindis en su proyecto.

Aquí estamos llamando al método nativo de ReactNative

ToastModule.show ("Hola Mundo");

¡Eso es! Ejecute su proyecto y use tostadas en cualquier parte del proyecto.

En BoTree, creamos aplicaciones web y móviles para agregar valor al negocio de nuestros clientes. Nos alineamos para garantizar que nuestro cliente se beneficie al máximo de nuestro compromiso. Envíenos una línea para analizar cómo podemos ayudarlo a llevar su negocio al siguiente nivel.

Escríbanos. Háblanos.