Hvordan bygger man en React Native Android-bro?

Når du bruger React Native til at skrive mobile apps, er JavaScript det primære programmeringssprog. Nogle gange kan det være en god ide at kalde en platform-API, der ikke understøttes af den eksisterende React Native-komponent, eller bruge et tredjeparts Android-bibliotek. I disse tilfælde skal du skrive en oprindelig kode til brodannelse ved hjælp af Android Studio og Xcode. I denne artikel vil jeg demonstrere, hvordan jeg opretter et enkleste React Native Bridge-modul trin for trin.

Krav til opbygning af pakke til ReactNative

  • Android Studio
  • React-Native CLI
  • Node

Vi opretter en bro / pakke til React Native for at få adgang til Toast (Fra Android Native) ved hjælp af JavaScript.

For at oprette en hvilken som helst pakke først skal vi konfigurere den grundlæggende biblioteksstruktur, så lad os oprette katalogstrukturen som nedenfor

1. Opret pakkeoversigt:

mkdir react-native-android-toast

2. Kør følgende kommando for at starte pakken

cd-reaktion-native-android-toast
npm init

Når du kører npm init, vil det spørge dig om pakken. Indtast alle de oplysninger, der er relateret til pakken, og den vil oprette package.json-fil.

Nu skal du oprette et Android-bibliotek og en index.js-fil.

  • Android-biblioteket indeholder al java / oprindelig kode.
  • index.js-fil er vores indgangspunkt for pakke, som vi har nævnt i pakken.json-fil også denne fil skaber broen mellem Javascript og Android.

Når det grundlæggende bibliotek er konfigureret nu, er vi nødt til at konfigurere Android til at skrive java / native code oprette android katalogstrukturen som nedenfor

  • AndroidManifest.xml: Manifestfil til en Android-applikation er en ressourcefil, der indeholder alle de detaljer, der kræves af Android-systemet om applikationen.

ToastModule.java:

  • ToastModule udvider ReactContextBaseJavaModule-klassen og implementerer den funktionalitet, der kræves af JavaScript.
  • Alle React-metoder vil blive skrevet som @ReactMethod, vi har oprettet metodevisningen (), som vi vil få adgang til fra javascript.
  • Hvis du vil oprette de flere metoder, du kan, skal du bare skrive @ReactMethod inden metodedefinitionen, da React vil forstå, at denne metode vil blive påberåbt fra javascript.

ToastPackage.java

ToastPackage bruges til at registrere modulet. Bare kopier koden til din ToastPackage.java-fil, og ændre den pr. Krav.

Index.js

Denne fil bruges til at indpakke det oprindelige modul i et JavaScript-modul.

En NativeModule er en Java-klasse, der normalt udvider ReactContextBaseJavaModule-klassen og implementerer den funktionalitet, der kræves af JavaScript.

Dette bruges dybest set til at kalde vores modul fra javascript.

Indtil videre har vi med succes opsat Android- og JavaScript-kommunikationsbroen.

Hvordan bruges denne pakke i vores projekt?

Opret et React Native-projekt: react-native init-eksempel

Da alle nodemoduler skal installeres under {React Native project} \ node_modules \.

Du skal blot tilføje navnet på din pakke-katalog i React Native Project's package.json-fil og sti til din pakke og køre følgende kommando til brug i dit projekt.

npm installation
reaktion-native link

react-native link-kommando knytter din pakke til dit projekt og din klar til at få adgang til skålen fra javascript.

Nu skal du bare importere den pakke til din JS-fil, hvor du vil vise ristet brød til dit projekt.

Her kalder vi den Native Method fra ReactNative

ToastModule.show (“Hello World”);

Det er det! Kør dit projekt og brug toast hvor som helst i dit projekt.

Hos BoTree bygger vi web- og mobilapplikationer for at tilføje værdi til vores klients forretning. Vi justerer os for at sikre, at vores klient drager mest ud af vores engagement. Giv os en linje for at diskutere, hvordan vi kan hjælpe med at føre din virksomhed til det næste niveau.

Skriv til os. Tal med os.