كيفية بناء جسر React Native Android؟

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

متطلبات لبناء حزمة ل ReactNative

  • أندرويد ستوديو
  • رد الفعل الأصلي CLI
  • العقدة

نقوم بإنشاء جسر / حزمة لـ React Native للوصول إلى Toast (من Android Native) باستخدام JavaScript.

لإنشاء أي حزمة أولاً ، نحتاج إلى إعداد بنية الدليل الأساسية لذلك ، يتيح إنشاء بنية الدليل على النحو التالي

1. إنشاء دليل الحزمة:

mkdir رد فعل أصلي الروبوت نخب

2. قم بتشغيل الأمر التالي لبدء الحزمة

مؤتمر نزع السلاح رد فعل أصلي الروبوت نخب
npm init

عند تشغيل npm init ، سيسألك عن الحزمة. أدخل جميع المعلومات المتعلقة بالحزمة وستقوم بإنشاء ملف package.json.

الآن يجب عليك إنشاء دليل android واحد وملف index.js واحد.

  • يحتوي دليل Android على جميع رموز java / الأم.
  • ملف index.js هو نقطة دخولنا للحزمة كما ذكرنا في ملف package.json أيضًا ، هذا الملف ينشئ الجسر بين Javascript و Android.

بمجرد إعداد الدليل الأساسي الآن ، يتعين علينا إعداد android لكتابة java / code code ، قم بإنشاء بنية دليل android كما هو موضح أدناه

  • AndroidManifest.xml: ملف البيان لتطبيق أندرويد هو ملف مورد يحتوي على جميع التفاصيل التي يحتاجها نظام أندرويد حول التطبيق.

ToastModule.java:

  • ToastModule يمتد فئة ReactContextBaseJavaModule وينفذ الوظيفة المطلوبة بواسطة JavaScript.
  • ستتم كتابة جميع أساليب React على أنهاReactMethod ، لقد أنشأنا طريقة show () التي سنقوم بالوصول إليها من javascript.
  • إذا كنت ترغب في إنشاء المزيد من الطرق ، يمكنك فقط كتابةReactMethod قبل أن يفهم طريقة React بأنه React أنه سيتم استدعاء هذه الطريقة من javascript.

ToastPackage.java

ToastPackage يستخدم لتسجيل الوحدة النمطية. ما عليك سوى نسخ الرمز إلى ملف ToastPackage.java وتغييره وفقًا لمتطلباتك.

Index.js

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

NativeModule هي فئة Java تعمل عادةً على توسيع فئة ReactContextBaseJavaModule وتنفذ الوظيفة المطلوبة بواسطة JavaScript.

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

حتى الآن ، قمنا بإعداد جسر اتصالات Android و JavaScript بنجاح.

كيفية استخدام هذه الحزمة في مشروعنا؟

إنشاء مشروع React Native: react-native init Example

بما أنه يجب تثبيت جميع وحدات العقدة ضمن {React Native project} \ node_modules \.

ما عليك سوى إضافة اسم دليل الحزمة الخاص بك إلى ملف package .json في React Native Project ومسار الحزمة الخاصة بك وتشغيل الأمر التالي لاستخدامه في مشروعك.

تثبيت npm
رد فعل الرابط الأصلي

سوف يقوم أمر react-native link بربط الحزمة الخاصة بك في المشروع الخاص بك وعلى استعداد للوصول إلى نخب من جافا سكريبت.

الآن فقط قم باستيراد تلك الحزمة إلى ملف JS الخاص بك حيث تريد إظهار الخبز المحمص في مشروعك.

نحن هنا نسمي الطريقة الأصلية من ReactNative

ToastModule.show ("Hello World") ؛

هذا هو! قم بتشغيل مشروعك واستخدم الخبز المحمص في أي مكان في المشروع.

في BoTree ، نقوم ببناء تطبيقات الويب والهاتف المحمول لإضافة قيمة إلى أعمال عملائنا. نحن نساند أنفسنا للتأكد من أن عملائنا يستفيدون أكثر من مشاركتنا. أرسل لنا خطًا لمناقشة كيف يمكننا المساعدة في الارتقاء بعملك إلى المستوى التالي.

ترك لنا خطا. تكلم معنا.