الفرق بين المراجعتين لصفحة: «ReactNative/native modules intro»

من موسوعة حسوب
لا ملخص تعديل
طلا ملخص تعديل
 
(مراجعتان متوسطتان بواسطة مستخدمين اثنين آخرين غير معروضتين)
سطر 1: سطر 1:
== مدخل إلى الوحدات الأصيلة Native Modules ==
<noinclude>{{DISPLAYTITLE:مدخل إلى الوحدات الأصيلة في React Native}}</noinclude>
يحتاج تطبيق React Native أحيانًا إلى الوصول إلى واجهة API للمنصة الأصيلة غير المتوفرة افتراضيًا في JavaScript ، مثل واجهات API الأصيلة للوصول إلى Apple Pay أو Google Pay. قد ترغب في إعادة استخدام بعض مكتبات لغات Objective-C أو Swift أو Java أو C ++‎ القائمة دون الحاجة إلى إعادة تطبيقها في لغة JavaScript، أو كتابة بعض الشيفرات عالية الأداء ومتعددة الخيوط multi-threaded لأمور معينة كمعالجة الصور.
يحتاج تطبيق React Native أحيانًا إلى الوصول إلى واجهة API للمنصة الأصيلة غير المتوفرة افتراضيًا في JavaScript ، مثل واجهات API الأصيلة للوصول إلى Apple Pay أو Google Pay. قد ترغب في إعادة استخدام بعض مكتبات لغات Objective-C أو Swift أو Java أو C ++‎ القائمة دون الحاجة إلى إعادة تطبيقها في لغة JavaScript، أو كتابة بعض الشيفرات عالية الأداء ومتعددة الخيوط multi-threaded لأمور معينة كمعالجة الصور.


يظهر نظام الوحدات الأصيلة NativeModule نسخًا من أصناف Java/Objective-C/C++‎ (الأصيلة) إلى JavaScript (اختصارًا JS) ككائنات JS، مما يتيح لك تنفيذ شيفرة أصيلة عشوائية من داخل JS. لا نتوقع أن تكون هذه الميزة جزءًا من عملية التطوير المعتادة، لكن يجب أن تكون موجودة. إن لم يصدّر إطار عمل React Native واجهة API أصيلة يحتاجها تطبيق JS الخاص بك، فيجب أن تكون قادرًا على تصديرها بنفسك.
يظهِر نظام الوحدات الأصيلة NativeModule نسخًا من أصناف Java/Objective-C/C++‎ (الأصيلة) إلى JavaScript (اختصارًا JS) ككائنات JS، مما يتيح لك تنفيذ شيفرة أصيلة عشوائية من داخل JS. لا نتوقع أن تكون هذه الميزة جزءًا من عملية التطوير المعتادة، لكن يجب أن تكون موجودة. إن لم يصدّر إطار عمل React Native واجهة API أصيلة يحتاجها تطبيق JS الخاص بك، فيجب أن تكون قادرًا على تصديرها بنفسك.


=== إعداد الوحدة الأصيلة ===
== إعداد الوحدة الأصيلة ==
هناك طريقتان لكتابة وحدة أصيلة لتطبيق React Native الخاص بك:
هناك طريقتان لكتابة وحدة أصيلة لتطبيق React Native الخاص بك:


# مباشرةً ضمن مشاريع iOS أو Android لتطبيق React Native.
# مباشرةً ضمن مشاريع iOS أو Android لتطبيق React Native.
# كحزمة NPM يمكن تثبيتها كاعتمادية بواسطة تطبيقك أو تطبيقات React Native الأخرى.
# كحزمة NPM يمكن تثبيتها كاعتمادية dependency بواسطة تطبيقك أو تطبيقات React Native الأخرى.


سنوضّح طريقة تطبيق وحدة أصيلة مباشرةً داخل تطبيق React Native، ولكن يمكن توزيع الوحدة الأصيلة كحزمة NPM. يمكنك الاطلاع على صفحة [[ReactNative/native modules setup|إعداد الوحدات الأصيلة في React Native]] كحزمة NPM إن كنت مهتمًا بذلك.
سنوضّح طريقة تطبيق وحدة أصيلة مباشرةً داخل تطبيق React Native، ولكن يمكن توزيع الوحدة الأصيلة كحزمة NPM. يمكنك الاطلاع على صفحة [[ReactNative/native modules setup|إعداد الوحدات الأصيلة في React Native]] كحزمة NPM إن كنت مهتمًا بذلك.


=== البداية ===
== البداية ==
سنوضّح في الصفحات التالية كيفية إنشاء وحدة أصيلة مباشرة داخل تطبيق React Native، لكن ستحتاج إلى تطبيق React Native للعمل. يمكنك اتباع الخطوات الموضّحة في صفحة [[ReactNative/getting started|مدخل إلى React Native]] إذا لم يكن لديك تطبيق بالفعل.
سنوضّح في الصفحات التالية كيفية إنشاء وحدة أصيلة مباشرة داخل تطبيق React Native، لكن ستحتاج إلى تطبيق React Native للعمل. يمكنك اتباع الخطوات الموضّحة في صفحة [[ReactNative/getting started|مدخل إلى React Native]] إذا لم يكن لديك تطبيق بالفعل.


لنفترض أنك تريد الوصول إلى واجهات API الأصيلة لتطبيق التقويم في نظامي التشغيل iOS / Android من شيفرة JavaScript داخل تطبيق React Native بهدف إنشاء أحداث التقويم. لا يظهر React Native واجهة برمجة تطبيقات JavaScript للتواصل مع مكتبات التقويم الأصيلة، ولكن يمكنك من خلال الوحدات الأصيلة كتابة شيفرة أصيلة تتواصل مع واجهات API التقويم الأصيلة، ثم يمكنك استدعاء هذه الشيفرة الأصيلة من خلال JavaScript في تطبيق React Native الخاص بك.
لنفترض أنك تريد الوصول إلى واجهات API الأصيلة لتطبيق التقويم calendar في نظامي التشغيل iOS / Android من شيفرة JavaScript داخل تطبيق React Native بهدف إنشاء أحداث التقويم. لا يظهر React Native واجهة برمجة تطبيقات JavaScript للتواصل مع مكتبات التقويم الأصيلة، ولكن يمكنك من خلال الوحدات الأصيلة كتابة شيفرة أصيلة تتواصل مع واجهات API الأصيلة الخاصة بالتقويم، ثم يمكنك استدعاء هذه الشيفرة الأصيلة من خلال JavaScript في تطبيق React Native الخاص بك.


سننشئ في الصفحات القادمة وحدة تقويم أصيلة لكل من نظامي [[ReactNative/native modules android|Android]] و [[ReactNative/native modules ios|iOS]].
سننشئ في الصفحات القادمة وحدة تقويم أصيلة لكل من نظامي [[ReactNative/native modules android|Android]] و [[ReactNative/native modules ios|iOS]].
سطر 22: سطر 22:


* [https://reactnative.dev/docs/native-modules-intro صفحة Native Modules Intro في توثيق React Native الرسمي.]
* [https://reactnative.dev/docs/native-modules-intro صفحة Native Modules Intro في توثيق React Native الرسمي.]
[[تصنيف:ReactNative]]
[[تصنيف:React Native Docs]]

المراجعة الحالية بتاريخ 13:49، 9 أكتوبر 2021

يحتاج تطبيق React Native أحيانًا إلى الوصول إلى واجهة API للمنصة الأصيلة غير المتوفرة افتراضيًا في JavaScript ، مثل واجهات API الأصيلة للوصول إلى Apple Pay أو Google Pay. قد ترغب في إعادة استخدام بعض مكتبات لغات Objective-C أو Swift أو Java أو C ++‎ القائمة دون الحاجة إلى إعادة تطبيقها في لغة JavaScript، أو كتابة بعض الشيفرات عالية الأداء ومتعددة الخيوط multi-threaded لأمور معينة كمعالجة الصور.

يظهِر نظام الوحدات الأصيلة NativeModule نسخًا من أصناف Java/Objective-C/C++‎ (الأصيلة) إلى JavaScript (اختصارًا JS) ككائنات JS، مما يتيح لك تنفيذ شيفرة أصيلة عشوائية من داخل JS. لا نتوقع أن تكون هذه الميزة جزءًا من عملية التطوير المعتادة، لكن يجب أن تكون موجودة. إن لم يصدّر إطار عمل React Native واجهة API أصيلة يحتاجها تطبيق JS الخاص بك، فيجب أن تكون قادرًا على تصديرها بنفسك.

إعداد الوحدة الأصيلة

هناك طريقتان لكتابة وحدة أصيلة لتطبيق React Native الخاص بك:

  1. مباشرةً ضمن مشاريع iOS أو Android لتطبيق React Native.
  2. كحزمة NPM يمكن تثبيتها كاعتمادية dependency بواسطة تطبيقك أو تطبيقات React Native الأخرى.

سنوضّح طريقة تطبيق وحدة أصيلة مباشرةً داخل تطبيق React Native، ولكن يمكن توزيع الوحدة الأصيلة كحزمة NPM. يمكنك الاطلاع على صفحة إعداد الوحدات الأصيلة في React Native كحزمة NPM إن كنت مهتمًا بذلك.

البداية

سنوضّح في الصفحات التالية كيفية إنشاء وحدة أصيلة مباشرة داخل تطبيق React Native، لكن ستحتاج إلى تطبيق React Native للعمل. يمكنك اتباع الخطوات الموضّحة في صفحة مدخل إلى React Native إذا لم يكن لديك تطبيق بالفعل.

لنفترض أنك تريد الوصول إلى واجهات API الأصيلة لتطبيق التقويم calendar في نظامي التشغيل iOS / Android من شيفرة JavaScript داخل تطبيق React Native بهدف إنشاء أحداث التقويم. لا يظهر React Native واجهة برمجة تطبيقات JavaScript للتواصل مع مكتبات التقويم الأصيلة، ولكن يمكنك من خلال الوحدات الأصيلة كتابة شيفرة أصيلة تتواصل مع واجهات API الأصيلة الخاصة بالتقويم، ثم يمكنك استدعاء هذه الشيفرة الأصيلة من خلال JavaScript في تطبيق React Native الخاص بك.

سننشئ في الصفحات القادمة وحدة تقويم أصيلة لكل من نظامي Android و iOS.

مصادر