מבוא למודולים Native ב React Native

React Native מעצימה מפתחים לבנות יישומים ניידים חוצה פלטפורמות באמצעות JavaScript ו- React. בעוד האוניות המסגרת עם קבוצה עשירה של רכיבים בנוי-in עבור אלמנטים משותפים של UI ו- API למכשיר הליבה, יישומי ייצור לעתים קרובות דורשים יכולות מעבר לזמן הריצה של JavaScript של React Native.מודולים Native משמשים גשר בין JavaScript וקוד ספציפי פלטפורמה כתוב ב- Swift, Objective-C, Kotlin, Java או שהם פותחים גישה לחיישנים, להרגיש יעיל של iOS, ו-S-S-S-S-S-S-S-S-S-S-S-S-S-S-S-Sams-Sams-Sams-S, כלומר, כלומר, כלומר, כלומר, כלומר, תכונות מורכבות יותר, הן תכונות של מערכת ההפעלה של iOS ו-Sams-Sams-Sams-Sams-Sams-Sams-S-Sams-S-S-Sams-S-Compet-Compet-Sam.

במדריך זה, אנו הולכים לאורך כל מחזור החיים של מודול יליד - מהגדרת הסביבה שלך וקוד פלטפורמה כתיבה, לרשום את המודול, חשיפת שיטות, ואכילה אותם מ- JavaScript.We'll גם לכסות את התרגילים הטובים ביותר, שיקולי ביצועים, ודוגמאות בעולם האמיתי כגון גישה למצלמה, טיפול במודולים רקע ותקשורת בין חוטים.

הבנת מודולים וגשר

בליבתו, האדריכלות של React Native מסתמכת על גשר שסידורי והודעות deserialize בין חוט JavaScript לבין חוטי הילידים.מודולים Native הם אובייקטים החיים בצד הילידים והם רשומים עם זמן ריצה JavaScript.כאשר אתה קורא שיטה על מודול יליד מ-JS, הגשר שולח הודעה בצד הילידים, מבצע את השיטה, ומחזיר את התוצאה (אם בכלל) חזרה ל- JSclas, מאפשר לך לצפין את התבנית מאובטחת או באמצעות ה- API של שימוש ב- API, לא ניתן ל- API, לדוגמה, לא זמין, באמצעות התקן מאובטח, כדי לספק גישה סטנדרטי, כלומר, באמצעות שימוש ב- API של המכשיר, כלומר, כדי לספק גישה ל- API, לא מאובטח, כדי לספק גישה ל- API, באמצעות ה- API, כדי לספק גישה ל- API, באמצעות התקן מאובטח, או ל- API, לדוגמה, כדי לספק גישה ל- API, באמצעות התקן מאובטח, באמצעות שימוש ב- API של ה- API של ה- API, באמצעות התקן מאובטח, באמצעות התקן מאובטח, באמצעות התקן מאובטח, באמצעות התקן מאובטח, כדי לאפשר גישה מאובטח, כדי לספק גישה מאובטח, לדוגמה, לא מאובטח, לא מאובטח, באמצעות התקן מאובטח, באמצעות התקן מאובטח, כדי לספק גישה ל- API מאובטח, כדי לספק גישה ל- API, כדי לספק

מודולים Native הם בעלי ערך מיוחד בתרחישים הבאים:

  • אתה צריך לשלב ספריית יליד (למשל, לעיבוד תשלום, למידת מכונה או מציאות מוגברת) שאין לו עטיפה JavaScript.
  • אתה דורש ביצועים גבוהים, פעולות בעלות נמוכה כי יהיה להאט על ידי חוט JS (למשל, עיבוד תמונה, סינתזה אודיו).
  • עליך לגשת לתכונות ספציפיות פלטפורמה שאינן חלק מההלב של React Native - כמו iOS HomeKit או ה- Biometric Prompt של אנדרואיד.
  • אתה רוצה לשתף קוד בין אפליקציה Native React לבין בסיס קוד Native קיים.

לפני צלילה ליישום, חשוב להבין כי מודולים מקומיים אינם "כדורים מקמאים" - הם מגבירים מורכבות, דורשים בדיקות על כל פלטפורמה, ועשויים להציג חששות בטיחות חוט.עם זאת, כאשר הם משתמשים באופן עסיסי, הם מאפשרים סוג של פונקציונליות מתקדמת שמציבה את היישום שלך בנפרד ממתחרים פשוטים יותר חוצה פלטפורמות.

הגדרת סביבת הפיתוח שלך

כדי ליצור מודולים ילידים, אתה צריך את הסביבה לפיתוח React Native סטנדרטי עבור אנדרואיד ו iOS.זה כולל Java / Kotlin כלי עבור אנדרואיד (אנדרואיד סטודיו, Gradle, אנדרואיד SDK) ו Xcode עבור iOS עם CocoaPods (או Swift Pack Manager) עבור ניהול תלות.לוודא כי כתבת קוד Native לפני ניסיון מודולים ילידים - אתה צריך להיות נוח עם יסודות של יצירת מבנה Natives והבנה של צוות.

רוב היזמים מתחילים בפרויקט Native React שנוצר באמצעות FLT:0 בתוך הפרויקט, מודולים מקומיים ממוקמים בדרך כלל בתוך ה-FLT:1 ו-FLT:2 במאיות.עבור מודולריות וכושר התחדשות, אתה יכול גם לעטוף את מודול הילידים שלך כמו חבילת npm נפרדת - מודולים קהילתיים רבים לעקוב אחר דפוס זה.

יצירת מודול אינדיאני: היסודות

כל מודול Native מורכב משני חלקים: יישום ספציפי פלטפורמה (אחד עבור אנדרואיד, אחד עבור iOS) ואת קוד הצריכה JavaScript. בואו לשבור את השלבים עבור כל פלטפורמה.

אנדרואיד (Kotlin/Java)

באנדרואיד, אתה יוצר שיעור המרחיב את ה-FLT:3 וליישם את השיטות שאתה רוצה לחשוף.כל שיטה שיש לקרוא לה מ- JavaScript חייבת להיות מנוסחת עם קונסול 4 ויש לה יחס של 5 (או להשתמש ב-Callback/promise כדי להחזיר נתונים).

package com.yourapp

import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.bridge.ReactContextBaseJavaModule
import com.facebook.react.bridge.ReactMethod
import com.facebook.react.bridge.Promise

class MyNativeModule(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) {

 override fun getName(): String = "MyNativeModule"

 @ReactMethod
 fun doSomething(param: String, promise: Promise) {
 try {
 // Perform native work here
 val result = "Hello from Kotlin! Received: $param"
 promise.resolve(result)
 } catch (e: Exception) {
 promise.reject("ERROR", e.message)
 }
 }
}

לאחר הגדרת המודול, עליך לרשום אותו באמצעות מערכת החבילה של React Native. ליצור כיתת חבילה אשר מיישמת את ה-FLT 7:

package com.yourapp

import com.facebook.react.ReactPackage
import com.facebook.react.bridge.NativeModule
import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.uimanager.ViewManager

class MyNativePackage : ReactPackage {
 override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
 return listOf(MyNativeModule(reactContext))
 }

 override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
 return emptyList()
 }
}

לבסוף, הוסיפו את החבילה לשיטת ה-FLT:9 (או FLT:10) בתוך שיטת ה-FLT:11.

override fun getPackages(): List<ReactPackage> {
 val packages = PackageList(this).packages
 packages.add(MyNativePackage())
 return packages
}

iOS (Swift/Objective-C)

ב- iOS, מודולים ילידים כתובים בדרך כלל ב- Objective-C או Swift. React Native מצפה לקובץ ראשי ומימוש התואמים לפרוטוקול ה-FLT:13.עבור סוויפט, עליך ליצור ראש מתפתל.

// MyNativeModule.h
#import <React/RCTBridgeModule.h>

@interface MyNativeModule : NSObject <RCTBridgeModule>
@end

// MyNativeModule.m
#import "MyNativeModule.h"
#import <React/RCTLog.h>

@implementation MyNativeModule

RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(doSomething:(NSString *)param
 resolver:(RCTPromiseResolveBlock)resolve
 rejecter:(RCTPromiseRejectBlock)reject)
{
 NSString *result = [NSString stringWithFormat:@"Hello from iOS! Received: %@", param];
 resolve(result);
}

@end

אין צורך ברישום חבילה נוסף עבור iOS - React Native באופן אוטומטי מגלה שיעורים התואמים את ה-FLT (אך עליך לוודא שקובץ .m מתפרסם בהמטרה שלך וכי אתה מפעיל FLT:16 אם אתה מוסיף כל תלות ילידית.

עבור סוויפט, השלבים דומים אך דורשים את התכונה של FLT:17 ומנהיג מתפתל.

import Foundation

@objc(MyNativeModule)
class MyNativeModule: NSObject {
 @objc
 func doSomething(_ param: String, resolver resolve: @escaping RCTPromiseResolveBlock, rejecter reject: @escaping RCTPromiseRejectBlock) {
 let result = "Hello from Swift! Received: \(param)"
 resolve(result)
 }
}

(ב) בפרשת ה' (ב"ב) ב[[1924]], [[1924]]

מודולים Natives של JavaScript

לאחר שהמודול המקומי שלך ייושם ורשום, באפשרותך לגשת אליו בקוד ה-JavaScript של ה-FLT:21 באמצעות האובייקט (FLT:21 ).

import { NativeModules } from 'react-native';

const { MyNativeModule } = NativeModules;

// Calling an exported method
MyNativeModule.doSomething('React Native')
 .then(result => console.log(result))
 .catch(error => console.error(error));

ניתן גם להשתמש ב-(FLT:25 או מטפלות אירוע במידת הצורך.שים לב כי שם השיטה ב- JavaScript חייב להתאים בדיוק את שם השיטה שאתה מייצא בקוד Native Maps אותם 1:1, תוך התעלמות מפרמטר השם של שיטת האנדרואיד אם אתה מעליו.

(ב) שיטות המקבלות פרמטרים מרובים, פשוט להעביר אותם כטיעונים - הגשר יטפל בסידורים (סוגים פרמטרים תומכים כוללים: (FLT:26, FLT:27, FLT:28, FLT:29, FLT:30 (מפות), פונקציות (שיחות), ותפקודים (שיחות) עם זאת, באמצעות Promises באמצעות טיעון FLT:31 (אנדרואיד) או פתרון /rejecter /rejecter (משימת) עם זאת, עם זאת, כי הוא שילוב של קוד פתוח (החלומי טבע).

דפוסי תקשורת מתקדמים

בעוד שיטה בסיסית קוראת לכסות מקרים רבים של שימוש, תכונות מתקדמות דורשות לעתים קרובות יותר דפוסי תקשורת מתוחכמות.התגובה אינדיאנית תומכת בכמה מנגנונים:

שיחות נגד הבטחות

עבור פעולות חד פעמיות, הבטחות הן הפחות נפוצות עבור זרם נתונים מתמשך (למשל, צילומי חיישן), אתה עשוי מעדיף שיחות.עם זאת, שיחות הן פחות נפוצות ב- React Native, כי הם יכולים להוביל ל-Callback-hell.a דפוס טוב יותר עבור זרמים הוא פולט אירועים מהצד הילידים ל- JavaScript באמצעות ה-FLT:32 (iOS) או LTF:33 ו-F.

אירועים מ- Native to JavaScript

כדי לשלוח נתונים מסונכרן מקוד Native ל-JS (למשל, כאשר עדכוני חיישן יליד), באפשרותך להשתמש באירוע פולטת סינגלטון.

reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)
 .emit("onSensorUpdate", Arguments.createMap().apply {
 putString("data", sensorValue)
 })

ב-iOS, ייבואFLT:38 ו-Override תמכו באירועים:

@implementation MyNativeModule

RCT_EXPORT_MODULE();

- (NSArray<NSString *> *)supportedEvents {
 return @[@"onSensorUpdate"];
}

// In your native method or delegate callback:
[self sendEventWithName:@"onSensorUpdate" body:@{@"data": sensorValue}];
@end

ב- JavaScript, להירשם לאירוע באמצעות שימוש ב-FLT:40:

import { NativeEventEmitter, NativeModules } from 'react-native';

const { MyNativeModule } = NativeModules;
const eventEmitter = new NativeEventEmitter(MyNativeModule);

eventEmitter.addListener('onSensorUpdate', (event) => {
 console.log('Sensor data:', event.data);
});

אל תשכחו להסיר את המאזינים כאשר הרכיב לא חשוב כדי למנוע דליפות זיכרון.

ניהול וביצועים

כברירת מחדל, כל שיטת מודול Native קורא לרוץ על בריכת חוט הילידים, בנפרד מן חוט UI.זה בסדר עבור רוב הפעולות, אבל אם אתה צריך לעדכן את UI ישירות מן מודול הילידים שלך (למשל, ביצוע חישוב כבד ועדכון נוף), עליך לשלוח עבודה אל החוט הראשי. על אנדרואיד, להשתמש FLT:42; על iOS, להשתמש ב-iOS, להשתמש ב-FLT:43.

עבור משימות רקע ארוכות (כגון סינכרון מסד נתונים או סריקה Bluetooth), לשקול שימוש ב-FLT:44 או שיחות כדי למנוע חסימת הגשר.You יכול גם ליצור חוטים נוספים בתוך המודול המקומי שלך, אבל להיות זהיר עם בטיחות חוט - המדינה המשותפת חייבת להיות מסונכרן.

טיפ ביצועים: מזער את גודל הנתונים העוברים דרך הגשר.ערכים גדולים או כתמים בינאריים (למשל, תמונות) צריך להיות מטופלים עם נתיבי קבצים או הפניות במקום סידורים ב JSON.

דוגמאות אמיתיות בעולם

כדי לחזק את המושגים, בואו נבחן שני מקרים שבהם מודולים מקומיים הם הכרחיים.

גישה מצלמה

ל-FBI יש מצלמה מקוצרת (FLT:45 ), אך לא כוללת ממשק API מצלמה ברמה נמוכה.מודול Native יכול לעטוף את המצלמה של הפלטפורמה - לדוגמה, ה-FLT:46 של אנדרואיד או iOS'sFLT:47 (המודול שלך יכול לחשוף שיטות כדי לפתוח את המצלמה בתצוגה מקדימה, ללכוד תמונה, ולהחזיר את התמונה ל-JS זה בדיוק מה ספריות פופולריות כמו FLT8, יש לך את הגדרות שלך, לחץ על ידי עיבוד ידני, ו-ידי שימוש מלא, לחץ על ידי עיבוד ידני, ו-ידי שימוש ידני, ו-ידי שימוש מלא, ו-ידי עיבוד מלא, ו-JS.

תקשורת בין-כחול נמוכה (BLE)

חיבור ל-ABLE Peripherals (למשל, צגים בקצב הלב, משואות) דורש ממשקי API של מערכת Native System. A Nativeמודול יכול לסרוק עבור מכשירים, להתחבר, לגלות שירותים, לקרוא / לכתוב תכונות, כי פעולות BLE הן מסונכרנות ולעתים קרובות כרוכות שיחות, פולטות אירועים (כמו FLT:49 או FLT:50) הוא דפוס טבעי כמה קוד פתוח, אך מבטיח לך רק את הפונקציונליות שלך קיים.

הפרקטיקה הטובה ביותר והמלכודות

  • (FLT:0Write Units Testing for Native Code.FreaLT:1) הן Android Studio והן Xcode מספקות מסגרות בדיקה (Junit, XCTest) בדוק את שיטות המודול שלך בבידוד לפני שילוב עם React Native.
  • (ב) ,(א) , ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇
  • (FLT:0) שמור על הגשר אורה.FLT:1 להימנע מעוברים חפצים גדולים לעתים קרובות.אם אתה צריך לייעל נתונים גבוהים של קידוד (למשל, חיישן ב -100Hz), לשקול עדכונים או מעבר למודל שבו קוד Native מעבד נתונים לפני עיבוד ורק שולח תוצאות מצטברות.
  • (FLT:0) ביצוע הממשק של מודול הילידים שלך ביסודיות.ראהFLT ( 1) השתמש JSDoc או WANME כדי לתאר כל שיטה, הפרמטרים שלה, ערכי החזרה והבדלים פלטפורמה.זה חיוני כאשר חברי צוות אחרים או קהילת הקוד הפתוח צורכים את המודול שלך.
  • (ב) [15] , ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇
  • (FLT:0) מינוף מודולים קיימים כאשר ניתן.FreaLT:1) למערכת האקולוגית של React Native יש אלפי חבילות.לפני כתיבת מודול Native משלך, חפש את אלה הקיימים.אם אתה מוצא מודול שכמעט מתאים לצרכים שלך, לשקול לתרום ולא להמציא מחדש את הגלגל.
  • (FLT:0)ConsiderModules לפרויקטים חדשים.BuildFLT ( 1 החל מ- React Native 0.68, הארכיטקטורה החדשה עם טורבוModules מציעה ביצועים טובים יותר ושיתוף זיכרון JavaScript.אם אתה מתחיל אפליקציה חדשה, להעריך באמצעות טורבוModules (באמצעות אדריכלות חדשה) במקום הגשר הישן.

משאבים חיצוניים

(ב) לעיין בתיעוד המודולים של הילידים (הידועים ב-Ul): [13] לתיעוד האינדיאנים על מודולים מקומיים (IQ) (IQ) ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇

מסקנה

מודולים Native הם כלי רב עוצמה בארסנל של React Native, המאפשר גישה למלוא המלא של יכולות פלטפורמה. בעוד הם מציגים מורכבות נוספת - הדורש ידע של Java / Kotlin או Swift / Objective-C, ניהול חוט זהיר, ובדיקה קפדנית - התגמול הוא היכולת לספק תכונות מתקדמות כי אחרת יהיה בלתי אפשרי.

התחל קטן: לבנות מודול מחשבון פשוט כי מכפיל שני מספרים וחוזר את התוצאה. ואז בוגר למודולים מורכבים יותר כמו אינדיקטור ברמת סוללה או מסנן תמונה מותאם אישית. כל מודול יליד אתה יוצר להעמיק את ההבנה של הפלטפורמה והופך אותך למפתח נייד יותר.