Cómo construir un simple módulo personalizado React Native para iOS y Android desde cero

Hoy, estoy muy feliz de escribir este artículo sobre reaccionar módulos nativos. Nunca pensé que estaría escribiendo en Medium. Es una gran plataforma para compartir conocimientos, habilidades y experiencias. Espero que mi pequeña contribución sea útil para aquellos que están pensando en cómo construir un módulo nativo en React Native. Antes, nos sumergimos en esta sección. Quiero comenzar con estas preguntas

1. ¿Qué es el módulo nativo en React Native?
- Un módulo nativo es un puente que se comunica entre la aplicación y las plataformas. La aplicación usa JavaScriptCore, que es JavaScript Engine, mientras que las API de la plataforma están escritas en Objective-C, Swift y Java.

2. ¿Por qué necesitamos?
- A veces, una aplicación necesita funciones más avanzadas como el procesamiento de imágenes, una base de datos o cualquier cantidad de extensiones avanzadas. O tal vez desee escribir un código de alto nivel de rendimiento y multiproceso. Estas son características más avanzadas que le permiten escribir código nativo real.

En este artículo, le mostraré cómo podemos simplemente acceder a las funciones del módulo nativo desde nuestra aplicación. Para esto, supongo, tiene un conocimiento básico sobre Objective-C y la programación de Android.

¿Estás listo? Empecemos.

La parte principal del acceso al código desde JavaScript al Módulo nativo se ve así. ‘React-native-custom-module’ se refiere al módulo nativo personalizado que reside en la carpeta node_modules del proyecto raíz.

El código anterior simplemente busca la lista de módulos de la plataforma IOS y Android. Esta es la parte de implementación simple de una aplicación. Para lograr las implementaciones anteriores, crearemos estas secciones.

  1. Módulo nativo IOS
  2. Módulo nativo de Android
  3. Administrador de paquetes de nodos (NPM)
  4. Sección de la aplicación (captura de pantalla anterior) - Listo
  5. Para crear el módulo nativo IOS

Cree archivos nativos para su módulo personalizado (react-native-custom-module) en Xcode.

Como puede ver en las capturas de pantalla anteriores, hay dos archivos nativos generados RCTCustomModule.h y RCTCustomModule.m.

1.1 RCTCustomModule.h

Este archivo nativo es solo una clase Objective-C que implementa RCTBridgeModule. RCT es una abreviatura de ReaCT. El código se parece a

1.2 RCTCustomModule.m

Para implementar el protocolo RCTBridgeModule, debemos definir la macro RCT_EXPORT_MODULE para exportar RCTCustomModule. React Native no expondrá ningún método de RCTCustomModule a JavaScript a menos que se le indique explícitamente. Esto se puede hacer definiendo la macro RCT_EXPORT_METHOD ().

Para obtener más información detallada, puede visitar este enlace.

2. Para crear el Módulo Android

Cree archivos nativos para el módulo personalizado en Android Studio (prefiero Android Studio).

2.1 CustomModuleModule.java

Este módulo es una clase Java que extiende la clase ReactContextBaseJavaModule. Esta clase ha definido el nombre del método "getName ()". Este método devuelve el nombre de cadena del NativeModule. La parte de implementación se verá así "NativeModules.CustomModule" en el lado de JavaScript.

Para exponer un método a JavaScript, debe ser anotado usando @ReactMethod. El tipo de retorno de este método de puente siempre es nulo. El puente React Native es asíncrono, por lo que la única forma de pasar los datos a JavaScript mediante Callbacks o emitiendo eventos. Para obtener más información detallada, puede hacer clic aquí.

2.2 CustomModulePackage.java

Para acceder desde JavaScript, el módulo personalizado anterior debe registrarse y simplemente puede hacerse proporcionando la API createNativeModules. De lo contrario, no estará disponible en el lado de JavaScript.

Este paquete debe proporcionarse en el método getPackages de MainApplication.Java. La ruta de este archivo es: android / app / src / main / java / com / your-package-name / MainApplication.java

Ahora, creemos un módulo npm para acceder a estas funcionalidades. cree una carpeta react-native-custom-module dentro de la carpeta node_modules de su proyecto raíz. Esto es solo para pruebas fuera de línea. El archivo predeterminado index.js se parece a

La estructura general de la carpeta react-native-custom se ve a continuación después de integrar todos los archivos.

Esta es una implementación simple de React Native boilerplate. El código fuente completo de este módulo nativo personalizado está aquí.

¡Disfrutar! Feliz codificación.