Kuidas luua Scratchist lihtne IOS-i ja Androidi reaalajas kohandatud moodul

Täna on mul väga hea meel kirjutada see artikkel reageerivate kohalike moodulite kohta. Ma pole kunagi mõelnud, et kirjutan keskmisele lehele. See on suurepärane platvorm teadmiste, oskuste ja kogemuste jagamiseks. Loodan, et minu väike panus on abiks neile, kes mõtlevad, kuidas luua React Native-i emakeele moodul. Enne seda sukeldusime sellesse jaotisse. Tahan alustada nendest küsimustest

1. Mis on reaalajas moodul?
- Natiivmoodul on sild, mis suhtleb rakenduse ja platvormide vahel. Rakendus kasutab JavaScripti, mis on JavaScripti mootor, samas kui platvormi apid on kirjutatud Objective-C, Swift ja Java.

2. Miks me seda vajame?
- Mõnikord vajab rakendus rohkem edasijõudnute funktsioone, näiteks pilditöötlust, andmebaasi või suvalist arvu eellaiendeid. Või võite kirjutada kõrgetasemelise jõudluse, mitme keermega kodeerimise. See on keerukamad funktsioonid, mis võimaldavad kirjutada päris natiivkoodi.

Selles artiklis näitan teile, kuidas me saame oma rakendusest lihtsalt juurde pääseda moodulite loomulikele funktsioonidele. Selle jaoks, ma eeldan, on teil põhiteadmised Objective-C ja Androidi programmeerimisest.

Oled sa valmis? Alustame.

Põhiosa koodilt JavaScripti kaudu natiivmoodulile ligipääsemisel näeb välja selline. „Reageerima-loomulik-kohandatud moodul” tähistab kohandatud looduslikku moodulit, mis asub juurprojekti kaustas node_modules.

Ülaltoodud kood tõmbab lihtsalt moodulite loendi IOS-ist ja Androidi platvormist. See on rakenduse lihtne rakendamise osa. Ülaltoodud rakenduste tegemiseks loome need sektsioonid.

  1. IOS-i moodul
  2. Androidi native moodul
  3. Sõlmede paketihaldur (NPM)
  4. Rakenduste jaotis (ekraanipildi kohal) - Valmis
  5. IOS-i loomuliku mooduli loomiseks

Looge oma kohandatud mooduli (react-native-custom-mooduli) looduslikud failid Xcode'is.

Nagu ülaltoodud ekraanipiltide kohta näete, on loodud kaks looduslikku faili: RCTCustomModule.h ja RCTCustomModule.m.

1.1 RCTCustomModule.h

See algne fail on lihtsalt Objective-C klass, mis rakendab RCTBridgeModule. RCT on ReaCT lühend. Kood näeb välja selline

1.2 RCTCustomModule.m

RCTBridgeModule protokolli juurutamiseks peame RCTCustomModule eksportimiseks määratlema makro RCT_EXPORT_MODULE. React Native ei avalda RCTCustomModule'i mis tahes meetodeid JavaScriptile, kui selleks pole selgesõnaliselt öeldud. Seda saab teha, määrates RCT_EXPORT_METHOD () makro.

Lisateabe saamiseks külastage seda linki

2. Androidi mooduli loomiseks

Looge kohandatud mooduli jaoks kohalikud failid Android Studio'is (eelistan Android Studio).

2.1 CustomModuleModule.java

See moodul on Java klass, mis laiendab ReactContextBaseJavaModule klassi. Sellel klassil on määratletud meetodi nimi 'getName ()'. See meetod tagastab NativeModule'i stringi nime. Rakenduse osa näeb JavaScripti poolel välja selline: NativeModules.CustomModule.

Meetodi JavaScripti paljastamiseks tuleb see annoteerida, kasutades rakendust @ReactMethod. Selle sillameetodi tagastamise tüüp on alati tühine. React Native sild on asünkroonne, seega ainus viis andmete edastamiseks JavaScriptile, kasutades tagasihelistamist või sündmuse väljastamist. Lisateabe saamiseks klõpsake siin.

2.2 CustomModulePackage.java

JavaScripti juurde pääsemiseks tuleks ülaltoodud kohandatud moodul registreerida ja seda saab lihtsalt teha, pakkudes rakenduse createNativeModules rakendust. Vastasel juhul pole see JavaScripti poolel saadaval.

See pakett tuleb esitada MainApplication.Java meetodis getPackages. Selle faili tee on: android / app / src / main / java / com / teie-paketi nimi / MainApplication.java

Nüüd loome nendele funktsioonidele juurdepääsu saamiseks npm-mooduli. looge juurprojekti kaustas node_modules kaust react-native-custom-moodul. See on ette nähtud ainult võrguühenduseta testimiseks. Vaikimisi fail index.js näeb välja

Üldine kausta react-native-custom-kausta struktuur näeb välja pärast kõigi failide integreerimist.

See on lihtne React Native boileri juurutamine. Selle kohandatud loodusliku mooduli täielik lähtekood on siin.

Naudi! Õnnelik kodeerimine.