Com puc construir un pont d'Android React Native?

Quan escriviu aplicacions mòbils amb React Native, JavaScript és el llenguatge de programació principal. Tanmateix, de vegades és possible que vulgueu trucar a una API de plataforma que el component React Native existent no admet o utilitzar una biblioteca Android de tercers. En aquests casos, haureu d’escriure codi natiu per connectar-vos amb Android Studio i Xcode. En aquest article us mostraré pas a pas com crear el mòdul React Native Bridge més senzill.

Requisits per construir el paquet per a ReactNative

  • Android Studio
  • CLI React-Native
  • node

Estem creant un pont / paquet perquè React Native accedeixi a Toast (des d’Android Native) amb JavaScript.

Per crear un paquet primer, hem de configurar l’estructura de directoris bàsica. Creem l'estructura de directoris de la següent manera

1. Creeu un directori de paquets:

mkdir respond-native-android-toast

2. Executeu l'ordre següent per iniciar el paquet

cd react-native-android-toast
npm init

Quan executeu npm init, se us demanarà el paquet. Introduïu tota la informació sobre el paquet i es crearà el fitxer package.json.

Ara heu de crear un directori Android i un fitxer index.js.

  • El directori Android conté tot el codi Java / Natiu.
  • El fitxer index.js és el nostre punt d’entrada per al paquet, ja que hem esmentat al fitxer package.json que aquest fitxer també constitueix el pont entre Javascript i Android.

Un cop configurat el directori base, hem de configurar Android per escriure codi Java / natiu. Creeu l'estructura de directoris d'Android de la següent manera

  • AndroidManifest.xml: el fitxer de manifest d’una aplicació d’Android és un fitxer de recursos que conté tots els detalls que el sistema Android necessita sobre l’aplicació.

ToastModule.java:

  • ToastModule amplia la classe ReactContextBaseJavaModule i implementa la funcionalitat necessària per a JavaScript.
  • Tots els mètodes React s’escriuen com a @ReactMethod. Hem creat el mètode show () al qual accedim amb Javascript.
  • Si voleu crear més mètodes, tot el que heu de fer és escriure @ReactMethod abans que s'executi la definició del mètode perquè React reconeix que aquest mètode es diu mitjançant el Javascript.

ToastPackage.java

ToastPackage s’utilitza per registrar el mòdul. Simplement copieu i enganxeu el codi al fitxer ToastPackage.java i modifiqueu-lo segons les vostres necessitats.

Index.js

Amb aquest fitxer, el mòdul natiu s'inclou en un mòdul JavaScript.

Un NativeModule és una classe Java que normalment amplia la classe ReactContextBaseJavaModule i implementa la funcionalitat necessària per JavaScript.

Això s’utilitza bàsicament per trucar al nostre mòdul des de Javascript.

Fins ara hem establert amb èxit el pont de comunicació per a Android i JavaScript.

Com puc utilitzar aquest paquet al nostre projecte?

Creeu un projecte React Native: exemple d'iniciar react-native

Atès que tots els mòduls de node s'han d'instal·lar a {React Native project} \ node_modules \.

Simplement enganxeu el nom del directori del paquet al fitxer package.json de React Native Project i el camí d'accés del paquet i executeu l'ordre següent per utilitzar-lo al vostre projecte.

Instal·lació de npm
enllaç vinculat a la reacció

Amb l’ordre react-native link, el vostre paquet s’enllaça amb el vostre projecte i podeu accedir al pa torrat mitjançant Javascript.

Ara només cal que importeu el paquet al fitxer JS que vulgueu portar el pa torrat al vostre projecte.

Aquí anomenem el mètode natiu de ReactNative

ToastModule.show ("Hola món");

Això és! Executeu el vostre projecte i feu servir torrades a qualsevol lloc del vostre projecte.

A BoTree, creem aplicacions web i mòbils per afegir valor al negoci dels nostres clients. Ens alinem per garantir que els nostres clients treguin el màxim partit al nostre compromís. Envieu-nos un correu electrònic per discutir com podem portar el vostre negoci al següent nivell.

Posar-se en contacte. Parleu amb nosaltres