Kako izraditi jednostavan modni modul React Native za IOS i Android od nule

Danas sam vrlo rado napisao ovaj članak o reakcijama nativnih modula. Nikad nisam mislio da ću pisati na Mediumu. Odlična je platforma za razmjenu znanja, vještina i iskustava. Nadam se da će moj mali doprinos biti koristan onima koji razmišljaju o tome kako izgraditi izvorni modul u React Native. Prije smo zaronili u ovaj odjeljak. Želim krenuti od ovih pitanja

1. Što je Native Modul u React Native?
- Native Modul je most koji komunicira između aplikacije i platformi. Aplikacija koristi JavaScriptCore, što je JavaScript Engine, dok su apisi na platformi napisani u Objective-C, Swift i Java.

2. Zašto nam trebaju?
- Ponekad je aplikaciji potrebne dodatne unaprijed značajke poput obrade slike, baze podataka ili bilo kojeg broja unaprijed proširenja. Ili možda želite da napišete visokokvalitetno, višestruko kodiranje visokih performansi. Ovo su naprednije značajke koje omogućuju pisanje stvarnog izvornog koda.

U ovom ću vam članku pokazati kako jednostavno možemo pristupiti značajkama izvornog modula iz naše aplikacije. Za to pretpostavljam da imate temeljna znanja o Objective-C i Android programiranju.

Jesi li spreman? Započnimo.

Glavni dio pristupa kodu s JavaScripta na Native Module izgleda ovako. 'React-native-custom-module' odnosi se na prilagođeni izvorni modul koji se nalazi u mapi node_modules korijenskog projekta.

Gornji kod jednostavno dohvaća popis modula s IOS i Android platforme. Ovo je jednostavan dio implementacije aplikacije. Da bismo izvršili gore navedene implementacije, stvorit ćemo ove odjeljke.

  1. IOS izvorni modul
  2. Android izvorni modul
  3. Upravitelj paketa čvora (NPM)
  4. Odjeljak aplikacije (iznad snimke zaslona) - Gotovo
  5. Za izradu izvornog modula IOS-a

Napravite izvorne datoteke za svoj prilagođeni modul (reaktivni-izvorni-prilagođeni modul) u Xcode-u.

Kao što možete vidjeti iznad zaslona, ​​postoje dvije izvorne datoteke generirane RCTCustomModule.h i RCTCustomModule.m.

1.1 RCTCustomModule.h

Ova izvorna datoteka samo je klasa Objective-C koja implementira RCTBridgeModule. RCT je kratica od ReaCT. Izgled izgleda

1.2 RCTCustomModule.m

Za implementaciju RCTBridgeModule protokola, moramo definirati RCT_EXPORT_MODULE makronaredbu za izvoz RCTCustomModule. React Native neće izlagati nijednu metodu RCTCustomModule JavaScript-u ako nije izričito rečeno. To se može postići definiranjem makronaredbe RCT_EXPORT_METHOD ().

Više informacija potražite na ovom linku

2. Za izradu Android modula

Napravite izvorne datoteke za prilagođeni modul u Android studiju (više volim Android Studio).

2.1 CustomModuleModule.java

Ovaj modul je klasa Java koja proširuje klasu ReactContextBaseJavaModule. Ova klasa ima definirano ime metode "getName ()". Ova metoda vraća naziv niza NativeModule. Dio za implementaciju izgledat će ovako na NativeModules.CustomModule na JavaScript strani.

Da biste metodu izložili JavaScript-u, ona se mora primijetiti pomoću @ReactMethod. Povratna vrsta ove metode mosta uvijek je nevaljana. Most React Native je asinkroni, tako da je jedini način da se podaci proslijede u JavaScript pomoću povratnih poziva ili odašiljajućih događaja. Za detaljnije informacije možete kliknuti ovdje.

2.2 CustomModulePackage.java

Za pristup iz JavaScripta, gornji prilagođeni modul treba biti registriran i jednostavno se može učiniti pružanjem api createNativeModules. U suprotnom, neće biti dostupan na JavaScript strani.

Ovaj paket mora biti dostupan u metodi getPackages u Glavnoj aplikaciji.Java. Put do ove datoteke je: android / app / src / main / java / com / ime vašeg paketa / MainApplication.java

Sada, stvorimo npm modul za pristup ovim funkcijama. stvorite mapu react-native-custom-module unutar mape node_modules vašeg korijenskog projekta. Ovo se odnosi samo na izvanmrežno testiranje. Zadana datoteka index.js izgleda

Ukupna struktura reakcija-izvorno-prilagođena mapa izgleda ispod nakon integrirane sve datoteke.

Ovo je jednostavna realizacija React Native kotlovske ploče. Cijeli izvorni kod ovog prilagođenog izvornog modula nalazi se ovdje.

Uživati! Sretno kodiranje.