Kako izraditi most React Native Android?

Kada koristite React Native za pisanje mobilnih aplikacija, JavaScript je primarni programski jezik. Međutim, ponekad možete pozvati API platforme koji ne podržava postojeća komponenta React Native ili upotrijebiti Android biblioteku treće strane. U tim slučajevima trebate napisati izvorni kôd za premošćivanje pomoću Android Studio i Xcode. U ovom ću članku pokazati kako stvoriti najjednostavniji modul React Native Bridge korak po korak.

Uvjeti za izradu Paketa za ReactNative

  • Android Studio
  • CL-ovi s reakcijama
  • Čvor

Stvaramo most / paket za React Native za pristup Tostu (From Android Native) pomoću JavaScript-a.

Za kreiranje bilo kojeg paketa prvo moramo postaviti osnovnu strukturu direktorija, pa omogućuje izradu strukture direktorija kao u nastavku

1. Stvorite direktorij paketa:

mkdir reagira-native-android-tost

2. Pokrenite sljedeću naredbu da pokrenete paket

CD reagirati-native-android-tost
npm init

Kad pokrenete npm init, pitati će vas o paketu. Unesite sve podatke povezane s paketom i to će stvoriti package.json datoteku.

Sada morate stvoriti jedan android direktorij i jednu datoteku index.js.

  • Android imenik sadrži sav java / izvorni kod.
  • Datoteka index.js naša je ulazna točka za paket kao što smo spomenuli u datoteci package.json i ova datoteka stvara most između Javascripta i Androida.

Nakon postavljanja osnovnog direktorija sada moramo postaviti android za pisanje java / izvornog koda, stvoriti android strukturu kataloga kao u nastavku

  • AndroidManifest.xml: Datoteka za manifest za android aplikaciju je datoteka resursa koja sadrži sve pojedinosti potrebne za android sustav o aplikaciji.

ToastModule.java:

  • ToastModule proširuje ReactContextBaseJavaModule klasu i provodi funkcionalnost koju zahtijeva JavaScript.
  • Sve React metode bit će napisane kao @ReactMethod, stvorili smo metodu show () kojoj ćemo pristupiti iz JavaScripta.
  • Ako želite stvoriti više mogućih metoda, jednostavno morate pisati samo @ReactMethod prije definicije metode jer će React shvatiti da će se ova metoda pozivati ​​iz JavaScripta.

ToastPackage.java

ToastPackage koristi se za registraciju modula. Samo kopirajte kôd u svoju datoteku ToastPackage.java i promijenite prema vašim zahtjevima.

Index.js

Ova se datoteka koristi za omatanje izvornog modula u JavaScript modulu.

NativeModule je klasa Java koja obično proširuje klasu ReactContextBaseJavaModule i implementira funkcionalnost koju zahtijeva JavaScript.

U osnovi se koristi za pozivanje našeg modula s JavaScripta.

Do sada smo uspješno postavili Android i JavaScript komunikacijski most.

Kako koristiti ovaj paket u našem Projektu?

Napravite projekt React Native: Primjer reaktivne izvorne reakcije

Budući da bi svi moduli čvora trebali biti instalirani u {React Native project} \ node_modules \.

Jednostavno dodajte ime direktorija paketa u datoteku package.json React Native Project i put vašeg paketa i pokrenite sljedeću naredbu za korištenje u svom projektu.

npm instalacija
reakcija-izvorna veza

naredba react-native link poveže vaš paket u vaš projekt i vaš spreman za pristup tostu sa JavaScripta.

Sada samo uvezite taj paket u svoju JS datoteku u kojoj želite pokazati zdravicu u svom projektu.

Ovdje zovemo Native Method iz ReactNative

ToastModule.show ("Pozdrav svijetu");

To je to! Pokrenite svoj projekt i koristite tost bilo gdje u projektu.

U BoTreeu gradimo mrežne i mobilne aplikacije kako bismo dodali vrijednost poslovanju naših klijenata. Mi se usklađujemo kako bismo osigurali da naš klijent ima najviše koristi od našeg angažmana. Nazovite nas putem da razgovaramo o tome kako vam možemo pomoći da vašu tvrtku prebacimo na višu razinu.

Spusti nam crtu. Pričaj sa nama.