Sådan oprettes et simpelt React Native Custom Module til IOS og Android Fra Scratch

I dag er jeg meget glad for at skrive denne artikel om reaktive indbyggede moduler. Jeg troede aldrig, at jeg ville skrive på Medium. Det er en fantastisk platform at dele viden, færdigheder og oplevelser. Jeg håber, mit lille bidrag vil være nyttigt for dem, der overvejer, hvordan man bygger indbygget modul i React Native. Før dykker vi ind i dette afsnit. Jeg vil starte med disse spørgsmål

1. Hvad er indfødt modul i reaktivt indfødt?
- Et indbygget modul er en bro, der kommunikerer mellem appen og platforme. App bruger JavaScriptCore, som er JavaScript-motor, mens platform-apis er skrevet i Objekt-C, Swift og Java.

2. Hvorfor har vi brug for?
- Nogle gange har en app brug for flere forhåndsfunktioner som billedbehandling, en database eller et hvilket som helst antal forhåndsudvidelser. Eller det kan være, at du vil skrive ydeevne på højt niveau, multi-threaded kodning. Dette er mere avancerede funktioner, der giver dig mulighed for at skrive ægte native code.

I denne artikel vil jeg vise dig, hvordan vi blot kan få adgang til indbyggede modulfunktioner fra vores app. For dette antager jeg, at du har kerneviden om Objekt-C og Android-programmering.

Er du klar? Lad os komme igang.

Hoveddelen af ​​at få adgang til kode fra JavaScript til Native Module ser sådan ud. 'React-native-custom-module' henviser til brugerdefineret native module, der er placeret under mappen node_modules i rodprojektet.

Ovenstående kode henter blot modulliste fra IOS og Android-platformen. Dette er den enkle implementeringsdel af en app. For at gennemføre ovenstående implementeringer, opretter vi disse sektioner.

  1. IOS native modul
  2. Android-modul til Android
  3. Node Package Manager (NPM)
  4. App-sektion (over skærmbillede) - Udført
  5. Sådan oprettes IOS-modul

Opret oprindelige filer til dit brugerdefinerede modul (react-native-custom-module) i Xcode.

Som du kan se ovenstående skærmbilleder, er der to oprindelige filer genereret RCTCustomModule.h og RCTCustomModule.m.

1.1 RCTCustomModule.h

Denne native fil er kun en Objekt-C-klasse, der implementerer RCTBridgeModule. RCT er en forkortelse af ReaCT. Koden ser ud

1.2 RCTCustomModule.m

For at implementere RCTBridgeModule-protokol, skal vi definere RCT_EXPORT_MODULE-makro for at eksportere RCTCustomModule. React Native vil ikke udsætte nogen metoder til RCTCustomModule for JavaScript, medmindre eksplicit får besked om det. Dette kan gøres ved at definere RCT_EXPORT_METHOD () makro.

For mere detaljerede oplysninger kan du besøge dette link

2. Sådan oprettes Android-modul

Opret oprindelige filer til brugerdefineret modul i Android Studio (jeg foretrækker Android Studio).

2.1 CustomModuleModule.java

Dette modul er en Java-klasse, der udvider ReactContextBaseJavaModule-klassen. Denne klasse har defineret metodenavn 'getName ()'. Denne metode returnerer strengnavnet på NativeModule. Implementeringsdelen vil se ud som denne 'NativeModules.CustomModule' i JavaScript-side.

Hvis du vil udsætte en metode for JavaScript, skal den kommenteres ved hjælp af @ReactMethod. Returtypen for denne brometode er altid ugyldig. React Native bridge er asynkron, så den eneste måde at videregive dataene til JavaScript ved hjælp af tilbagekald eller en emitterende begivenhed. For mere detaljeret information Du kan klikke her.

2.2 CustomModulePackage.java

For at få adgang fra JavaScript skal ovennævnte tilpassede modul registreres, og det kan simpelthen gøres ved at tilvejebringe createNativeModules api. Ellers er det ikke tilgængeligt på JavaScript-siden.

Denne pakke skal leveres i getPackages-metoden i MainApplication.Java. Stien til denne fil er: android / app / src / main / java / com / your-package-name / MainApplication.java

Lad os nu oprette et npm-modul for at få adgang til disse funktionaliteter. oprette en mappe react-native-custom-module i mappen node_modules i dit rodprojekt. Dette er kun til offline test. Standardfilen index.js ser ud

Den samlede reaktion-native-brugerdefinerede mappestruktur ligner neden efter integreret alle filer.

Dette er simpel React Native kedelpladeimplementering. Den fulde kildekode for dette brugerdefinerede native modul er her.

God fornøjelse! Glad kodning.