كيفية بناء الوحدة النمطية React Native Custom البسيطة الخاصة بـ IOS و Android من البداية

اليوم ، أنا سعيد جدًا لكتابة هذا المقال عن رد فعل الوحدات المحلية. لم اعتقد ابدا انني سأكتب على متوسطة. إنها منصة رائعة لتبادل المعرفة والمهارات والخبرات. آمل أن تكون مساهمي الصغيرة مفيدة لأولئك الذين يفكرون في كيفية بناء وحدة نمطية في React Native. من قبل ، ونحن الغوص في هذا القسم. أريد أن أبدأ من هذه الأسئلة

1. ما هي الوحدة الأصلية في React Native؟
- الوحدة الأصلية هي جسر يتصل بين التطبيق والأنظمة الأساسية. يستخدم التطبيق JavaScriptCore ، وهو JavaScript Engine ، بينما تتم كتابة apis platform في Objective-C و Swift و Java.

2. لماذا نحتاج؟
- في بعض الأحيان ، يحتاج التطبيق إلى المزيد من الميزات المتقدمة مثل معالجة الصور أو قاعدة بيانات أو أي عدد من الإضافات المتقدمة. أو ربما تريد كتابة أداء عالي المستوى ، ترميز متعدد الخيوط. هذه ميزات أكثر تقدماً تتيح لك كتابة رمز أصلي حقيقي.

في هذه المقالة ، سأريك كيف يمكننا ببساطة الوصول إلى ميزات الوحدة الأصلية من تطبيقنا. لهذا ، أفترض ، أن لديك معرفة أساسية حول برمجة الهدف و Android.

هل أنت جاهز؟ هيا بنا نبدأ.

يشبه هذا الجزء الرئيسي من الوصول إلى التعليمات البرمجية من JavaScript إلى Native Module. تشير عبارة "react-native-custom-module" إلى الوحدة الأصلية المخصصة التي توجد ضمن مجلد node_modules من مشروع الجذر.

رمز أعلاه ببساطة جلب قائمة وحدة من IOS ومنصة أندرويد. هذا هو جزء التنفيذ البسيط للتطبيق. لإنجاز التطبيقات المذكورة أعلاه ، سننشئ هذه الأقسام.

  1. وحدة IOS الأم
  2. وحدة الأم الروبوت
  3. مدير حزمة العقدة (NPM)
  4. قسم التطبيق (فوق لقطة الشاشة) - تم
  5. لإنشاء وحدة IOS الأصلية

قم بإنشاء ملفات أصلية للوحدة النمطية المخصصة (وحدة رد فعل أصلية مخصصة) في Xcode.

كما ترون لقطات الشاشة أعلاه ، يوجد ملفان أصليان تم إنشاؤهما RCTCustomModule.h و RCTCustomModule.m.

1.1 RCTCustomModule.h

هذا الملف الأصلي هو مجرد فئة Objective-C تنفذ RCTBridgeModule. RCT هو اختصار ReaCT. رمز يشبه

1.2 RCTCustomModule.m

لتطبيق بروتوكول RCTBridgeModule ، يجب أن نحدد ماكرو RCT_EXPORT_MODULE لتصدير RCTCustomModule. لن يعرض React Native أي أساليب من RCTCustomModule إلى JavaScript ما لم يتم إخباره صراحة. يمكن القيام بذلك عن طريق تحديد ماكرو RCT_EXPORT_METHOD ().

لمزيد من المعلومات التفصيلية ، يمكنك زيارة هذا الرابط

2. لإنشاء وحدة أندرويد

أنشئ ملفات أصلية لوحدة مخصصة في Android Studio (أفضل تطبيق Android Studio).

2.1 CustomModuleModule.java

هذه الوحدة النمطية هي فئة Java تمتد فئة ReactContextBaseJavaModule. حددت هذه الفئة اسم الطريقة "getName ()". هذه الطريقة تقوم بإرجاع اسم سلسلة NativeModule. سيبدو جزء التنفيذ مثل "NativeModules.CustomModule" في جانب JavaScript.

لفضح طريقة لجافا سكريبت ، يجب أن يتم شرحها باستخدامReactMethod. دائمًا ما يكون نوع الإرجاع الخاص بهذه الطريقة فارغًا. React Native bridge غير متزامن ، وبالتالي فإن الطريقة الوحيدة لتمرير البيانات إلى JavaScript باستخدام Callbacks أو حدث انبعاث. لمزيد من المعلومات التفصيلية ، يمكنك النقر هنا.

2.2 CustomModulePackage.java

للوصول من JavaScript ، يجب تسجيل الوحدة النمطية الموضحة أعلاه ويمكن القيام بذلك ببساطة عن طريق توفير createNativeModules api. خلاف ذلك ، لن يكون متاحًا على جانب JavaScript.

يجب توفير هذه الحزمة في طريقة getPackages الخاصة بـ MainApplication.Java. مسار هذا الملف هو: android / app / src / main / java / com / your-package-name / MainApplication.java

الآن ، لنقم بإنشاء وحدة npm للوصول إلى هذه الوظائف. إنشاء مجلد رد - وحدة - مخصص - داخل مجلد node_modules من مشروعك الجذر. هذا هو فقط للاختبار حاليا. يبدو الملف index.js الافتراضي

يشبه الهيكل العام لمجلد رد الفعل الشامل أدناه بعد دمج جميع الملفات.

هذا بسيط تنفيذ رد الفعل الأصلي. شفرة المصدر الكاملة لهذه الوحدة الأصلية المخصصة هنا.

استمتع! ترميز سعيد.