Kuidas ehitada React Native Androidi silda?

Kui kasutate mobiilirakenduste kirjutamiseks React Native, on JavaScripti peamine programmeerimiskeel. Mõnikord võiksite siiski helistada platvormi API-le, mida olemasolev komponent React Native ei toeta, või kasutada kolmanda osapoole Androidi teeki. Sellistel juhtudel peate andmeside loomiseks kirjutama omakoodi, kasutades selleks rakendusi Android Studio ja Xcode. Selles artiklis demonstreerin, kuidas samm-sammult luua kõige lihtsam React Native Bridge moodul.

Nõuded paketi ReactNative loomiseks

  • Android Studio
  • Reaktiivne CLI
  • Sõlm

Loome silla / paketi, mille abil React Native pääseb röstsaiale (Android Nativest) JavaScripti abil.

Mis tahes paketi loomiseks peame esmalt seadistama kataloogide põhistruktuuri, võimaldades luua kataloogistruktuuri järgmiselt

1. Looge paketi kataloog:

mkdir reageerida-native-android-toast

2. Paki käivitamiseks käivitage järgmine käsk

cd reageerida - natiiv-android-röstsai
npm init

Kui käivitate npm init, küsib see teilt paketi kohta. Sisestage kogu paketiga seotud teave ja see loob faili package.json.

Nüüd peate looma ühe androidi kataloogi ja ühe faili index.js.

  • Androidi kataloog sisaldab kogu java / omakoodi.
  • index.js fail on meie paketi sisenemispunkt, kuna failis package.json on mainitud, loob see fail silla Javascripti ja Androidi vahel.

Kui põhikataloog on nüüd seadistatud, peame androidi seadistama java / omakoodi kirjutamiseks, et luua androidi kataloogistruktuur järgmiselt

  • AndroidManifest.xml: Androidi rakenduse manifestfail on ressursifail, mis sisaldab kõiki androidi süsteemile rakenduse kohta vajalikke üksikasju.

ToastModule.java:

  • ToastModule laiendab ReactContextBaseJavaModule klassi ja juurutab JavaScripti poolt nõutavad funktsioonid.
  • Kõik React meetodid kirjutatakse kui @ReactMethod, oleme loonud meetodi show (), millele pääseme ligi javascripti kaudu.
  • Kui soovite luua rohkem meetodeid, peate enne meetodi määratlemist kirjutama ainult @ReactMethod, kuna React saab aru, et sellele meetodile kutsutakse javascript.

ToastPackage.java

ToastPackage kasutatakse mooduli registreerimiseks. Kopeerige lihtsalt kood oma ToastPackage.java faili ja muutke vastavalt oma vajadustele.

Index.js

Seda faili kasutatakse loodusliku mooduli mähimiseks JavaScripti moodulisse.

NativeModule on Java klass, mis tavaliselt laiendab ReactContextBaseJavaModule klassi ja rakendab JavaScripti poolt nõutud funktsioone.

Põhimõtteliselt kasutatakse seda meie mooduli kutsumiseks javascripti kaudu.

Siiani oleme Androidi ja JavaScripti suhtlussilla edukalt seadistanud.

Kuidas seda paketti meie projektis kasutada?

Looge reaalainete projekt: reageeri-natiivne init Näide

Kuna kõik sõlme moodulid tuleks installida jaotisse {React Native project} \ node_modules \.

Lisage lihtsalt oma paketi kataloogi nimi reaalainete projekti React Native Project faili package.json ja paketi tee ning käivitage järgmine käsk, mida oma projektis kasutada.

npm installimine
natiivne link

Käsk react-native link ühendab teie paketi teie projekti ja teie valmis juurdepääsu röstsaiale javascripti kaudu.

Nüüd lihtsalt importige see pakett oma JS-faili, kus soovite röstsaia oma projekti näidata.

Siin nimetatakse ReactNative'i natiivset meetodit

ToastModule.show (“Tere maailm”);

See selleks! Juhtige oma projekti ja kasutage röstsaia ükskõik kuhu oma projekti.

BoTree loomisel loome veebi- ja mobiilirakendusi, et lisada kliendi ettevõttele väärtust. Me joondame end sellega, et meie klient saaks meie kaasamisest võimalikult palju kasu. Pange meile rida, et arutada, kuidas saaksime aidata teie ettevõtet järgmisele tasemele viia.

Vabasta meile rida. Räägi meiega.