چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟

گاهی اوقات هنگام توسعه برنامه‌ها با React Native، در موقعیتی قرار می‌گیریم که کتابخانه‌ای برای react-native نداریم، اما برای برنامه‌های Android و iOS بومی (Native) وجود دارد. در چنین مواردی باید ماژول های Native را برای اندروید و iOS مورد استفاده قرار دهیم و آن ها را در سورس React Native فرآخوانی کنیم

در این مقاله ماژول SatisMeter که برای هر دو پلتفرم Android و IOS مورد استفاده قرار می گیرد و کاربرد آن ثبت بازخورد کاربران می باشد را مورد استفاده قرار می دهیم.

ابتدا یک پروژه React native با استفاده از دستور زیر ایجاد می کنیم :

npx react-native init rn_bridge_satismeter

یکپارچه سازی ماژول برای IOS:

مرحله اول :

وارد دایرکتوری پروژه ای که با دستور بالا ایجاد کرده ایم می شویم، از داخل فولدر ios فایل rn_bridge_satismeter.xcworkspace را با استفاده از xcode باز می کنیم.

cd rn_bridge_satismeter
cd ios
open rn_bridge_satismeter.xcworkspace file

مرحله دوم :

یک Cocoa Touch class  جدید با نام RCTSatisMeter ایجاد می کنیم که در تصویر زیر روند ایجاد فایل را مشاهده می کنید

این فرآیند دو فایل با نام های RCTSatisMeter.h  و  RCTSatisMeter.mایجاد می کند

مرحله سوم :

باید pod مربوط به ماژول را به podFile اضاف کنیم

'pod 'SatisMeter

مرحله چهارم:

فایل RCTSatisMeter.h که در فرآیند مرحله دوم ایجاد شد را مطابق کد زیر ویرایش می کنیم.

مرحله پنجم :

فایل RCTSatisMeter.m که در فرآیند مرحله دوم ایجاد شد را مطابق کد زیر ویرایش می کنیم.

RCT_EXPORT_MODULE : این متد ماژول Native را برای React Native ایجاد می کند

RCT_REMAP_METHOD() : نام متود را در جاوااسکریپت مشخص می کند

مرحله آخر:

ابتدا دستورات زیر را در مسیر فولدر ios اجرا کنید :

در دایکتوری پروژه و فولدر ios دستور pod install را اجرا می کنیم تا ماژول مورد نظر به پروژه ما link شود و در نهایت مطابق کد زیر با استفاده از ()SatisMeter.hook ماژول را مورد استفاده قرار می دهیم

حال اگر با استفاده از دستور npx react-native run-ios برنامه را اجرا کنید باید مطابق تصویر زیر ماژول به درستی برای شما کار کند.

آموزش جامع و پروژه محور react native

یکپارچه سازی ماژول برای Android:

cd rn_bridge_satismeter
cd android > app > src > main > java > com > rn_bridge_satismeter

مرحله اول :

در مسیری که بالا مشخص شد باید دو فایل SatisMeterModule.java و SatisMeterPackage.java را ایجاد کنیم

مرحله دوم :

فایل SatisMeterModule.java را مطابق کد زیر ویرایش می کنیم

()getName : نام ماژول را مشخص می کند

تمامی ماژول های Native که می خواهند با استفاده از Javascript مورد استفاده قرار گیرند باید با استفاده از @ReactMethod حاشیه نویسی (annotated) شوند

مرحله سوم :

فایل SatisMeterPackage.java را مطابق کد زیر ویرایش می کنیم

مرحله چهارم :

فایل MainAplication.java را باز کنید در این فایل برای اینکه به ماژول دسترسی داشته باشیم در متود getPackages() ماژول جدید را register می کنید مطابق کد زیر:

مرحله پنجم :

در این مرحله فای app/build.gradle را باز کنید و مطابق تصویر زیر ماژول را به dependencies اضافه کنید.

مرحله آخر:

نیازی به ایجاد تغییر در فایل App.js نیست و فقط کافیست دستور زیر را برای اجرای برنامه روی پلتفرم Android اجرا کنید تا مشابه تصویر زیر ببینید ماژول به درستی برای شما کار می کند

ممنون از اینکه وقت گذاشتید و این مقاله رو مطالعه کردید امیدوارم با استفاده از این روش چالشی برای استفاده از ماژول های Native در اپلیکیشن هایی که با react native توسعه می دهید نداشته باشید.

[منبع]