Table of Contents
مقدمة إلى الطرائق الوطنية في مجال رد الفعل
(ج) تمكين المطورين من بناء تطبيقات متنقلة عبر نظام " جافاسكوريب " و " ريكت " ، بينما تُدمج السفن الإطارية التي تحتوي على مجموعة غنية من المكونات الأساسية للعناصر المشتركة للمبادرة الموحدة والأجهزة الأساسية، فإن أجهزة الإنتاج غالبا ما تتطلب قدرات تتجاوز نطاق " الجاهز " ، الذي يُعدّه " جافاسكريب " ، والنموذج الموضوعي " .
وفي هذا الدليل، سنسير خلال دورة الحياة الكاملة لنموذج وطني - من وضع مدونة البيئة وكتابة النظام، وتسجيل الوحدة، وطرح الأساليب، واستهلاكها من جافاسكيبت، وسنغطي أيضا أفضل الممارسات، واعتبارات الأداء، والأمثلة الحقيقية للعالم مثل الوصول إلى الكاميرا، والتعامل مع المهام الأساسية، والاتصال بين الخيوط، وفي النهاية، ستكون هناك أسس متينة لتوحيد قدراتك.
فهم الطرائق الوطنية والجسر
ويرتكز هيكل " ريتشي " في جوهره على جسر يُسجّل ويحلّ الرسائل بين خيط جافاسكريبت والخيوط الأصلية، والنماذج الأصلية هي أشياء تعيش في الجانب الأصلي وتسجل في المكتبات التي تستخدم نموذجاً محلياً، وعند تسمية طريقة في وحدة محلية من الورقة المشتركة، يرسل الجسر رسالة إلى الطرف الأصلي، وينفذ نموذجاً للقراءة.
وتتسم الوحدات الوطنية بأهمية خاصة في السيناريوهات التالية:
- يجب أن تدمج مكتبة محلية (مثلاً، لتجهيز المدفوعات، أو التعلم الآلي، أو الواقع المعزز) التي لا تحتوي على ملفوف (جافاسكريبت).
- وتحتاجون إلى أداء عالي المستوى، وإلى عمليات منخفضة التردد تبطئها خيط الورقة المشتركة (مثل تجهيز الصور والتوليف الصوتي).
- ويجب أن تصلوا إلى ملامح محددة لا تشكل جزءا من جوهر " رد الفعل " - مثل " الوميكيت " أو " أندرويد " " " (EOS HomeKit) أو " أندرويد " (Beometric Prompt).
- تريد أن تشارك الرمز بين تطبيق رد الفعل الأصلي وقاعدة بيانات محلية قائمة
وقبل أن يتم التنفيذ، من المهم أن نفهم أن الوحدات المحلية ليست " رصاصة نادرة " - بل إنها تزيد من تعقيدها، وتستلزم إجراء اختبارات على كل منصة، وقد تستحدث شواغل تتعلق بالسلامة، ولكن عندما تستخدم بحزم، فإنها تتيح نوع الوظائف المتقدمة التي تحدد تطبيقك إلى جانب المنافسين الأبسطين المتنازعين في المناورات.
وضع بيئة التنمية الخاصة بك
ولخلق وحدات محلية، تحتاج إلى بيئة تنمية محلية نموذجية لكل من الأندرويد واليوس، تشمل أداة جافا/كوتلين للتأليف (استديو الروبوت، غرادل، وشركة أندرويد SDK) وشركة Xcode للشبكة مع شركة كوكوا بودس (أو مديرة مجموعة التعبئة) لإدارة الإعالة، وتكفلوا بأنكم كتبتم مدونة التكاثر قبل أن تحاولوا وضع نماذج محلية.
ويبدأ معظم المطورين بمشروع وطني لإعادة التصنيع أنشئ عن طريق .() وفي إطار المشروع، توضع الوحدات المحلية عموماً داخل الدليلين و، ويمكن أيضاً، بالنسبة للنموذج وإعادة الاستخدام، أن تغلف نموذجك المحلي كمجموعة مستقلة من النغمات المجهرية - تتبع وحدات مجتمعية كثيرة هذا النمط.
إنشاء وحدة وطنية: القواعد الأساسية
ويتألف كل وحدة محلية من جزأين: التنفيذ الخاص بالمنبر (واحد للأندرويد، وواحد للشبكة الدولية للطاقة الذرية) ورمز استهلاك جافاسكريبت، ولننفصل عن الخطوات الخاصة بكل منصة.
أندرويد (كوتلين/جوفا)
وعلى أندرويد، تخلق طبقة تمتد وتطبق الأساليب التي تريد أن تعرضها، ويجب أن تكون كل طريقة يمكن الاتصال بها من جافاسكريبت مشروحة بـ وأن يكون لها نوع من العودة (أو تستخدم إعادة الاتصال/الضرورة في بيانات العودة).
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)
}
}
}
وبعد تحديد الوحدة، يجب أن تسجلها بنظام راتجات السكان الأصليين، وأن تنشئ طبقة حزمة تنفذ :
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()
}
}
Finally, add the package to your (or ) inside the method:
override fun getPackages(): List<ReactPackage> {
val packages = PackageList(this).packages
packages.add(MyNativePackage())
return packages
}
iOS (Swift/Objective-C)
وفيما يتعلق بالشبكة الدولية للمناقصات، فإن الوحدات المحلية تُكتب عادة في " الهدف - جيم " أو سويفت، ويتوقع شركة React Native ملفاً رئيسياً وتنفيذاً يتفق مع بروتوكول ، وفيما يتعلق بسويت، يجب أن تخلق رئيساً متسلسلاً، وهنا مثال على ذلك:
// 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 automatically discovers classes that conform to . However, you must ensure the.m file is compiled in your target and that you run if you add any native dependencies.
وبالنسبة لسويت، فإن الخطوات متشابهة ولكنها تتطلب سمة ورأساً متسلسلاً، ويبدو أن تنفيذ سويفت نموذجي لهذا:
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)
}
}
تذكر أن تستورد ] في رأسك المتحرك الهدف: .
Consuming Native Modules from JavaScript
بمجرد تنفيذ وتسجيل نموذجك المحلي، يمكنك الوصول إليه في رمز رد الفعل الوطني (JvaScript) عن طريق الجسم، ويصبح الاسم الذي توفره في (أندرويد) أو (iOS) المفتاح الذي ترد فيه الوحدة.
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));
ويمكنك أيضاً استخدام أو متعهدي المناسبات حسب الحاجة، ملاحظة أن اسم الطريقة في جافاسكيبت يجب أن يطابق بالضبط الاسم الذي تصدره في مدونة السكان الأصليين، وأن تعيد رسم خرائط السكان الأصليين لهم 1: 1، متجاهلاً البارامتر الخاص بأسم الشروح في طريقة أندرويد إذا تجاوزته.
أما بالنسبة للأساليب التي تقبل بارامترات متعددة، فإنها تُنقلها ببساطة كحجج - وسيتولى الجسر التسلسل، وتشمل أنواع البارامترات الداعمة ، ، ، ، (الحلول)، والمهام (الثبات) غير أنه يستخدم الوعود عن طريق [FLT:
أنماط الاتصال المتقدمة
وفي حين أن الأساليب الأساسية تشمل حالات استخدام كثيرة، فإن السمات المتقدمة تتطلب في كثير من الأحيان أنماط اتصال أكثر تطوراً، فإن رد الفعل الوطني يدعم عدة آليات:
نداءات ضد الوعود
بالنسبة للعمليات التي تتم مرة واحدة، تعد الوعود أنظف، وبالنسبة لتدفقات البيانات المستمرة (مثلاً، القراءات المستشعرة)، قد تفضل الاسترداد، غير أن الاستردادات أقل شيوعاً في الأصل القومي الحديث، لأنها يمكن أن تؤدي إلى إعادة التلقيم، ومن الأفضل أن تُحدث الأحداث من الجانب الأصلي إلى جافاسكريب عبر (iOS).
Emitting Events from Native to JavaScript
To send data asynchronously from native code to JS (e.g., when a native sensor updates), you can use the event emitter singleton. On Android, obtain a reference to the and call :
reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)
.emit("onSensorUpdate", Arguments.createMap().apply {
putString("data", sensorValue)
})
On iOS, import and override supported events:
@implementation MyNativeModule
RCT_EXPORT_MODULE();
- (NSArray<NSString *> *)supportedEvents {
return @[@"onSensorUpdate"];
}
// In your native method or delegate callback:
[self sendEventWithName:@"onSensorUpdate" body:@{@"data": sensorValue}];
@end
In JavaScript, subscribe to the event using :
import { NativeEventEmitter, NativeModules } from 'react-native';
const { MyNativeModule } = NativeModules;
const eventEmitter = new NativeEventEmitter(MyNativeModule);
eventEmitter.addListener('onSensorUpdate', (event) => {
console.log('Sensor data:', event.data);
});
ولا تنسى أن تزيل المستمعين عندما لا يُحدث العنصر أي تسرب للذاكرة.
إدارة المطبوعات والأداء
وبحسب الافتراض، فإن جميع أساليب الوحدات المحلية تُستخدم في مجمع الخيوط الأصلي، منفصل عن الخيط الواحد، وهذا لا بأس به بالنسبة لمعظم العمليات، ولكن إذا أردت تحديث وحدة التفتيش المشتركة مباشرة عن نموذجك المحلي (مثلاً، القيام بحسابات ثقيلة وتحديث وجهة نظر)، فعليك أن تُرسل العمل إلى الخيط الرئيسي.
وبالنسبة للمهام الخلفية الطويلة الأمد (مثل تزامن قاعدة البيانات أو مسح بلوتون)، والنظر في استخدام أو عمليات إعادة الاتصال لتجنب عرقلة الجسر، كما يمكن أن ترسم خيوط إضافية داخل وحدتك المحلية، ولكن توخي الحذر مع السلامة من خيط الخيط - يجب أن تتزامن الدولة المشتركة.
تقديم معلومات موجزة عن الأداء: التقليل إلى أدنى حد من حجم البيانات التي تمر عبر الجسر، وينبغي التعامل مع صفائف كبيرة أو مع الخلايا الثنائية (مثل الصور) بمسارات ملف أو مراجع بدلا من أن تُدرج في الورقة المشتركة بين البلدان المساهمة بقوات.
أمثلة عالمية حقيقية
ولترسيخ المفاهيم، دعونا ندرس حالتين من الحالات المشتركة للاستعمال حيث لا غنى عن الوحدات المحلية.
آلة تصوير
React Native has a builtIN but does not include a lowlevel camera API. A native module can wrap the platform’s camera – for example, Android’s API or iOS’s . ويمكن أن تعرض وحدتك أساليب لفتح استعراض الكاميرا، ولتقطت دليلا، وتعيد مسار عملية التجهيز إلى الورقة المشتركة 48.
الاتصالات السلكية واللاسلكية
(ب) يتطلب التواصل مع الطرفيات (مثلاً، رصد معدل ضربات القلب، المنارات) نظاماً محلياً، ويمكن لنموذج وطني أن يفحص الأجهزة، ويربط، ويكتشف الخدمات، وخصائص القراءة/الكتابة، لأن عمليات البليغ مُتسمة بالغرابة، وكثيراً ما تنطوي على عمليات إعادة الاتصال، والأحداث المرتشقة (مثل أو )
أفضل الممارسات والخيوط
- برمجة اختبارات الوحدة الخاصة بمدونة السكان الأصليين.] يوفر كل من استديو وXcode أطراً للاختبار (JUnit, XC testing) وتختبر أساليب وحدتك في عزلة قبل الاندماج مع شركة React Native.
- Handle permissions Gracely.] Many Native modules require runtime permissions (camera, location, Bluetooth). React Native’s ] works for Android, but for iOS you may need to request permissions from within your native module or use a library like [FLT handle:52]. never assume permission.
- Keep the bridge light.] Avoid passing large objects frequently. If you need to stream high-frequency data (e.g., sensor at 100Hz), consider batching updates or shifting to a model where native code pre-processes data and only sends aggregated results.
- ]Document your native module’s API thoroughly.] Use JSDoc or a README to describe each method, its parameters, return values, and platform differences. This is crucial when other team members or the open-source community consume your module.
- Use only after the app is initialized.] because native modules rely on the bridge being ready, accessing them too early (e.g., in a global context) may result in . always access them inside a component or after a that waits for the bridge.
- Leverage existing modules when possible.] The React Native ecosystem has thousands of packages. Before writing your own native module, search for existing ones. If you find a module that almost fits your needs, consider contributing rather than reinventing the wheel.
- Consider Turbo Modules for new projects.] Starting from React Native 0.68, the new structure with Turbo Modules offers better performance and JavaScript — —native memory sharing. If you are starting a new app, evaluate using Turbo Modules (via the New Architecture) instead of the old bridge.
الموارد الخارجية
To dive deep into native module development, consult the official React Native documentation on native modules]. For platformspecific guidance, the Android developer guides and Apple’s developer documentation
خاتمة
إن الوحدات الوطنية هي أداة قوية في ترسانة مطوري مبادرة " رد الفعل " ، مما يتيح الوصول إلى النطاق الكامل لقدرات المنبر، وفي حين أنها تستحدث تعقيدا إضافيا - يتطلب معرفة " جافا/كوتلين " أو " سويفت/أوبوت " ، وإدارة دقيقة، واختبار صارم - فإن الدفع هو القدرة على تقديم سمات متقدمة يمكن أن يكون مستحيلا لولا ذلك، وذلك باتباع الأنماط المبينة في هذا الدليل - إنشاء وحدة اتصال ذات هيكل جيد.
ابدأوا بالصغر: بناء وحدة حاسبة بسيطة تضاعف رقمين وتعيد النتيجة ثم تتخرجون إلى وحدات أكثر تعقيداً مثل مؤشر مستوى البطارية أو مرشح للصور العادمة كل وحدة محلية تخلقها تتعمق فهمكم للمنصة وتجعلكم أكثر تطوراً للهواتف المحمولة