Kuinka rakentaa yksinkertainen React Native Custom -moduuli IOS: lle ja Androidille Scratchista

Tänään olen erittäin onnellinen kirjoittaessani tämän artikkelin reagoivista moduuleista. En koskaan ajatellut kirjoittavani Mediumille. Se on loistava alusta jakaa tietoa, taitoja ja kokemuksia. Toivon, että pienestä panoksestani on apua niille, jotka ajattelevat, kuinka rakentaa natiivimoduuli React Native -sovellukseen. Ennen sukellusta tähän osioon. Haluan aloittaa näistä kysymyksistä

1. Mikä on alkuperäismoduuli reagoivassa alkuperäisessä?
- Natiivimoduuli on silta, joka viestii sovelluksen ja käyttöympäristöjen välillä. Sovellus käyttää JavaScriptCorea, joka on JavaScript Engine, kun taas alustan apit on kirjoitettu Objective-C, Swift ja Java.

2. Miksi tarvitsemme?
- Joskus sovellus tarvitsee enemmän etenemisominaisuuksia, kuten kuvankäsittelyä, tietokantaa tai mitä tahansa määrää etukäteen laajennuksia. Tai ehkä haluat kirjoittaa korkean suorituskyvyn, monisäikeisen koodauksen. Tämä on edistyneempiä ominaisuuksia, joiden avulla voit kirjoittaa todellisen natiivikoodin.

Tässä artikkelissa esitän sinulle, kuinka pääsemme yksinkertaisesti natiivimoduulin ominaisuuksiin sovellukseltamme. Oletan, että sinulla on ydintieto Objective-C: stä ja Android-ohjelmoinnista.

Oletko valmis? Aloitetaan.

Pääosa koodin käyttämisestä JavaScriptiltä natiivimoduuliin näyttää tältä. 'Reagoi-natiivi-mukautettu moduuli' tarkoittaa mukautettua natiivia moduulia, joka sijaitsee juuriprojektin node_modules-kansiossa.

Yllä oleva koodi vain hakee moduuliluettelon IOS: lta ja Android-alustalta. Tämä on sovelluksen yksinkertainen toteutusosa. Suoritamme yllä olevat toteutukset luomalla nämä osiot.

  1. IOS-moduuli
  2. Androidin alkuperäinen moduuli
  3. Solmupakettihallinta (NPM)
  4. Sovellusosa (ruutukuvan yläpuolella) - Valmis
  5. IOS-natiivimoduulin luominen

Luo natiivitiedostot mukautetulle moduulillesi (react-native-custom-module) Xcodessa.

Kuten yllä olevista kuvakaappauksista näet, on olemassa kaksi alkuperäistä tiedostoa, jotka on luotu RCTCustomModule.h ja RCTCustomModule.m.

1.1 RCTCustomModule.h

Tämä alkuperäinen tiedosto on vain Objective-C-luokka, joka toteuttaa RCTBridgeModule. RCT on lyhenne ReaCT: stä. Koodi näyttää

1.2 RCTCustomModule.m

RCTBridgeModule-protokollan toteuttamiseksi meidän on määritettävä RCT_EXPORT_MODULE-makro viedäksesi RCTCustomModule. React Native ei altista mitään RCTCustomModule -menetelmiä JavaScriptille, ellei nimenomaisesti ole kehotettu. Tämä voidaan tehdä määrittelemällä RCT_EXPORT_METHOD () -makro.

Lisätietoja saat tämän linkin kautta

2. Luo Android-moduuli

Luo natiivitiedostoja mukautetulle moduulille Android Studiossa (mieluummin Android Studio).

2.1 CustomModuleModule.java

Tämä moduuli on Java-luokka, joka laajentaa ReactContextBaseJavaModule-luokkaa. Tällä luokalla on määritelty menetelmän nimi 'getName ()'. Tämä menetelmä palauttaa NativeModule-merkkijononimen. Toteutusosa näyttää tältä "NativeModules.CustomModule" JavaScriptin puolella.

Jotta menetelmä voidaan altistaa JavaScriptille, se on annettava merkinnällä käyttämällä @ReactMethod. Tämän siltamenetelmän paluutyyppi on aina tyhjä. React Native -silta on asynkroninen, joten ainoa tapa välittää tiedot JavaScriptille takaisinsoittojen avulla tai lähettämällä tapahtuma. Lisätietoja saat napsauttamalla tätä.

2.2 CustomModulePackage.java

Jotta JavaScriptiä voitaisiin käyttää, yllä oleva mukautettu moduuli olisi rekisteröitävä, ja se voidaan yksinkertaisesti tehdä tarjoamalla createNativeModules api. Muuten se ei ole saatavilla JavaScriptin puolella.

Tämä paketti on toimitettava MainApplication.Javan getPackages-menetelmällä. Tämän tiedoston polku on: android / app / src / main / java / com / your-pack-name / MainApplication.java

Nyt luodaan npm-moduuli näiden toimintojen käyttämiseksi. luo kansio react-native-custom-moduuli juuriprojektin node_modules-kansioon. Tämä on tarkoitettu vain offline-testaukseen. Oletustiedosto index.js näyttää

Reagoi-natiivi-mukautettu-kansiorakenne näyttää kokonaan alla kaikkien tiedostojen integroinnin jälkeen.

Tämä on yksinkertainen React Native -kattilalevyn toteutus. Tämän mukautetun alkuperäisen moduulin täydellinen lähdekoodi on täällä.

Nauttia! Hyvää koodausta.