React Native Made Easy: Native Bridge (avec Scan Kit) Partie 2


introduction

React Native est un outil pratique pour le développement multiplateforme, et bien qu’il soit devenu de plus en plus puissant grâce aux mises à jour, il y a des limites, par exemple sa capacité à interagir avec et à utiliser les composants natifs. Le pontage du code natif avec Javascript est l’un des moyens les plus populaires et les plus efficaces pour résoudre le problème. Le meilleur des deux mondes!

Actuellement, tous les kits HMS n’ont pas encore de support RN officiel, cet article vous expliquera comment créer un pont natif Android pour connecter votre application RN aux kits HMS, et Scan Kit sera utilisé comme exemple ici.

Le didacticiel est basé sur https://github.com/clementf-hw/rn_integration_demo/tree/4b2262aa2110041f80cb41ebd7caa1590a48528a, vous pouvez trouver plus de détails sur l’exemple de projet dans cet article: https://forums.developer.huawei.com/forumPortal/en/topicview?tid=0201230857831870061&fid=0101187876626530001.

Conditions préalables

Pour commencer, vous aurez besoin des éléments suivants:

  1. Compétences de base en développement Android

  2. Compétences de base en développement React Native

    1. Ces domaines ont déjà été largement couverts sur le site officiel de RN, ce forum et d’autres sources.

  3. HMS correctement configuré

    1. Vous pouvez également faire référence à l’article ci-dessus à ce sujet

  4. Dépendances majeures

    1. Version RN: 0.62.2 (sortie le 9 avril 2020)

    2. Version Gradle: 5.6.4

    3. Version du plugin Gradle: 3.6.1

    4. agcp: 1.2.1.301

Ce tutoriel est divisé en 3 parties:

  1. Pt. 1: Créez un composant d’interface utilisateur natif simple en tant qu’introduction et échauffement

  2. Pt. 2: pontage du kit de numérisation HMS dans React Native

  3. Pt. 3: Transformez le kit de numérisation en un module natif React autonome que vous pouvez importer dans d’autres projets ou même télécharger vers npm.

Kit de balayage HMS de pontage

Maintenant, nous avons des connaissances fondamentales sur la façon de combler, établissons quelque chose de significatif. Nous relierons le kit de numérisation Vue par défaut en tant que scanner de code QR, et aussi apprendre à communiquer du côté natif au côté natif de React.

Tout d’abord, nous devrons configurer le projet en suivant le guide pour configurer Scan Kit du côté natif: https://developer.huawei.com/consumer/en/doc/development/HMS-Guides/scan-preparation-4

Mettre agconnect-service.json en place. Ensuite, ajoutez à allprojects > référentiels au niveau racine build.gradle.

Ajouter à buildscript> référentiels

Ajouter à buildscript> dépendances

Aller à app / build.gradle et ajoutez ceci à l’en-tête:

Ajoutez ceci à dépendances

Ajouter à proguard-rules.pro

Maintenant, faites un synchronisation gradle. Vous pouvez également essayer de créer et d’exécuter l’application pour voir si tout va bien même si nous n’avons pas encore effectué de développement.

Ajoutez-les à AndroidManifest.xml

Ainsi, l’installation / configuration de base est terminée. Semblable à l’échauffement, nous allons créer un Module fichier en premier. Notez que dans un souci de variance et d’adaptabilité plus large du produit final, cette fois, nous allons en faire un simple Module natif au lieu de Composant d’interface utilisateur natif.

Nous avons vu comment les données circulent de RN à natif lors de l’échauffement (par ex. @ReactProp de notre bouton). Il existe également plusieurs façons de faire passer les données du natif au RN. Dans Scan Kit, il utilise startActivityForResult; par conséquent, nous devons implémenter ses écouteurs suivants.

Il y a quelques petits détails que nous devons ajouter. Tout d’abord, le côté javascript de React Native attend un Promettre du résultat.

Nous devons également ajouter un code de demande pour identifier qu’il s’agit de notre activité de kit de numérisation. 567 voici juste un exemple, la valeur est à votre discrétion:

Il y aura plusieurs conditions d’erreur / rejet, identifions et déclarons d’abord leur code:

En ce moment, le module devrait ressembler à ceci:

Maintenant, implémentons la méthode d’écoute

Voyons ce que cela fait

  • Lorsque l’auditeur reçoit un résultat de l’activité, il vérifie si c’est notre demande en vérifiant le code de demande.

  • Ensuite, il vérifie si l’objet de promesse est nul. Nous couvrirons l’objet promis plus tard, mais brièvement, cela est transmis de RN à natif, et nous comptons sur lui pour renvoyer les données à RN.

  • Ensuite, si le résultat est un ANNULÉ situation, nous disons à RN que le scanner est annulé, par exemple fermé par l’utilisateur, en appelant promise.reject ()

  • Si le résultat indique OK, nous obtiendrons les données en appelant getParcelableExtra ()

  • Nous allons maintenant voir si les données résultantes correspondent à notre type de données et ne sont pas vides, puis nous appellerons promise.resolve ()

  • Sinon, nous résoudrons un message de rejet général. Bien sûr, ici, vous pouvez développer et donner une ventilation et une résolution plus détaillées si vous le souhaitez

  • C’est beaucoup de vérification et de validation, mais on ne peut jamais être trop sûr, non?

Cool, maintenant nous avons terminé l’auditeur, travaillons sur l’appelant! C’est la méthode que nous appellerons côté RN, indiquée par le @ReactMethod annotation.

Donnez-lui du contenu

Faisons un tour à travers

  • Nous obtenons d’abord la référence d’activité actuelle et vérifions si elle est valide

  • Ensuite, nous prenons la promesse d’entrée et l’assignons à mScannerPromise que nous avons déclaré plus tôt, afin que nous puissions nous référer et l’utiliser tout au long du processus

  • Maintenant, nous appelons le kit de numérisation! Cette partie est identique à une implémentation Android normale.

  • Bien sûr, nous l’enveloppons avec un essai pour des raisons de sécurité

À ce stade, nous avons terminé la Module, comme pour l’échauffement, nous devons créer un Paquet. Cette fois, c’est un Module natif nous l’enregistrons donc dans createNativeModules () et aussi donner createViewManagers () une liste vide.

Comme précédemment, nous ajouterons le package à notre MainApplication.java, importez le package et ajoutez-le dans le getPackages () fonction.

Tout est prêt! Revenons au côté RN. Ceci est notre application de l’exercice d’échauffement (avec un petit changement de style pour les choses que nous allons ajouter).

Ajoutons un Bouton et définir son onPress propriété en tant que this.onScan (), que nous implémenterons ensuite:

Rechargez et voyez le bouton.

Semblable à celui de l’échauffement, nous pouvons déclarer la Module natif en utilisant cette manière simple:

Nous allons maintenant implémenter onScan () qui utilise le asynchrone / attendre syntaxe pour le codage asynchrone

Important! Le kit de numérisation nécessite CAMÉRA et READ_EXTERNAL_STORAGE les autorisations pour fonctionner, assurez-vous que vous avez géré cela au préalable. L’un des moyens recommandés pour le gérer est d’utiliser réagir-natif-autorisations bibliothèque https://github.com/react-native-community/react-native-permissions. Je ferai un autre article sur ce sujet, mais pour l’instant vous pouvez vous référer à https://github.com/clementf-hw/rn_integration_demo si vous en avez besoin.

Maintenant on clique… TADA!

Dans cette démo, c’est ce que onScan () contient:

Remarque: une modification mineure est nécessaire si vous vous basez sur la branche de ce projet de démonstration mentionnée précédemment.

Essayons maintenant de scanner ceci. Les données réelles contenues dans le QR Code sont:

Ce qui nous amène à Auckland! Maintenant votre Kit de numérisation HMS dans React Native est opérationnel!

Pt. 2 de ce tutoriel est terminé, n’hésitez pas à poser des questions. Vous pouvez également consulter le dépôt de l’exemple de projet sur github: https://github.com/clementf-hw/rn_integration_demo, et soulever un problème si vous avez des questions ou des mises à jour.

Dans la 3ème et dernière partie de ce tutoriel, nous allons voir comment faire RN Pont du kit de numérisation HMS un logiciel autonome, téléchargeable et importable Module React Native, que vous pouvez utiliser dans plusieurs projets au lieu de créer le Module natif un par un, et vous pouvez même le télécharger sur NPM à partager avec d’autres collègues développeurs.

Close Menu