Comment créer un simple module personnalisé natif de React pour IOS et Android From Scratch

Aujourd'hui, je suis très heureux d'écrire cet article sur les modules natifs de Rea. Je n'ai jamais pensé que j'écrirais sur Medium. C'est une excellente plateforme pour partager des connaissances, des compétences et des expériences. J'espère que ma petite contribution sera utile à ceux qui réfléchissent à la construction d'un module natif dans React Native. Avant, nous plongeons dans cette section. Je veux partir de ces questions

1. Qu'est-ce que Native Module dans React Native?
- Un module natif est un pont qui communique entre l'application et les plates-formes. App utilise JavaScriptCore, qui est un moteur JavaScript, alors que les apis de plate-forme sont écrits en Objective-C, Swift et Java.

2. Pourquoi avons-nous besoin?
- Parfois, une application nécessite davantage de fonctionnalités avancées, telles que le traitement d'images, une base de données ou un nombre quelconque d'extensions avancées. Ou peut-être souhaitez-vous écrire des performances de haut niveau, un codage multithread. Ce sont des fonctionnalités plus avancées qui vous permettent d'écrire du code natif réel.

Dans cet article, je vais vous montrer comment accéder simplement aux fonctionnalités des modules natifs à partir de notre application. Pour cela, je suppose, vous avez des connaissances de base sur la programmation Objective-C et Android.

Es-tu prêt? Commençons.

Voici l’essentiel de l’accès au code de JavaScript à Native Module. «Module réactif-natif-personnalisé» fait référence à un module natif personnalisé qui réside dans le dossier node_modules du projet racine.

Le code ci-dessus récupère simplement la liste des modules depuis la plate-forme IOS et Android. Ceci est la partie simple implémentation d'une application. Pour accomplir les implémentations ci-dessus, nous allons créer ces sections.

  1. Module natif d'IOS
  2. Module natif Android
  3. Node Package Manager (NPM)
  4. Section App (Capture ci-dessus) - Terminé
  5. Pour créer un module natif IOS

Créez des fichiers natifs pour votre module personnalisé (react-native-custom-module) dans Xcode.

Comme vous pouvez le voir ci-dessus, deux fichiers natifs, RCTCustomModule.h et RCTCustomModule.m, sont générés.

1.1 RCTCustomModule.h

Ce fichier natif est simplement une classe Objective-C qui implémente RCTBridgeModule. RCT est une abréviation de ReaCT. Le code ressemble à

1.2 RCTCustomModule.m

Pour implémenter le protocole RCTBridgeModule, nous devons définir la macro RCT_EXPORT_MODULE pour exporter RCTCustomModule. React Native n'exposera aucune méthode de RCTCustomModule à JavaScript à moins d'indication explicite. Cela peut être fait en définissant la macro RCT_EXPORT_METHOD ().

Pour plus d'informations détaillées, vous pouvez visiter ce lien

2. Créer un module Android

Créez des fichiers natifs pour un module personnalisé dans Android Studio (je préfère Android Studio).

2.1 CustomModuleModule.java

Ce module est une classe Java qui étend la classe ReactContextBaseJavaModule. Cette classe a défini le nom de méthode "getName ()". Cette méthode retourne le nom de chaîne du NativeModule. La partie implémentation ressemblera à ceci ‘NativeModules.CustomModule’ du côté JavaScript.

Pour exposer une méthode à JavaScript, elle doit être annotée à l'aide de @ReactMethod. Le type de retour de cette méthode de pont est toujours vide. Le pont réactif natif est asynchrone, ce qui en fait le seul moyen de transmettre les données à JavaScript à l'aide de rappels ou d'événements émetteurs. Pour plus d'informations, cliquez ici.

2.2 CustomModulePackage.java

Pour accéder à partir de JavaScript, le module personnalisé ci-dessus doit être enregistré. Pour ce faire, il suffit de fournir createiativeModules api. Sinon, il ne sera pas disponible du côté JavaScript.

Ce paquet doit être fourni dans la méthode getPackages de MainApplication.Java. Le chemin de ce fichier est: android / app / src / main / java / com / nom de votre paquet / MainApplication.java

Maintenant, créons un module npm pour accéder à ces fonctionnalités. créer un dossier react-native-custom-module dans le dossier node_modules de votre projet racine. Ceci est uniquement pour les tests hors ligne. Le fichier par défaut index.js ressemble à

La structure globale du dossier réactif-natif-personnalisé ressemble à celle présentée ci-dessous après intégration de tous les fichiers.

Il s’agit d’une implémentation simplifiée de React Native. Le code source complet de ce module natif personnalisé est ici.

Prendre plaisir! Bonne codage.