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

1404-01-10
ارسال شده توسط
برنامه نویسی react native
ماژول های نیتیو Android و IOS در React Native

ریکت نیتیو (React Native) یکی از محبوب‌ترین فریمورک‌های توسعه اپلیکیشن‌های موبایل است که به توسعه‌دهندگان امکان می‌دهد از جاوااسکریپت و ری‌اکت برای ساخت اپلیکیشن‌های اندروید و iOS استفاده کنند. با این حال، گاهی اوقات نیاز است از قابلیت‌های بومی (نیتیو) دستگاه مانند بلوتوث، سنسورها، دوربین و غیره استفاده شود که در این حالت، باید ماژول‌های نیتیو ایجاد کنیم. در این مقاله، نحوه ایجاد و استفاده از ماژول‌های نیتیو در اندروید و iOS را به صورت کامل بررسی خواهیم کرد.

ریکت نیتیو چیست؟

ریکت نیتیو یک فریمورک متن‌باز توسعه‌یافته توسط فیسبوک است که به توسعه‌دهندگان اجازه می‌دهد با استفاده از جاوااسکریپت و ری‌اکت، اپلیکیشن‌های موبایل کراس پلتفرم (اندروید و iOS) بسازند. برخلاف وب‌ویوهای هیبریدی، ریکت نیتیو از کامپوننت‌های بومی هر پلتفرم برای نمایش استفاده می‌کند که منجر به عملکرد بهتر و تجربه کاربری نزدیک به اپلیکیشن‌های نیتیو می‌شود.

ماژول نیتیو چیست و چه کاربردی دارد؟

ماژول نیتیو در React Native به کدی اشاره دارد که در زبان‌های نیتیو (Java/Kotlin برای اندروید و Objective-C/Swift برای iOS) نوشته شده و به صورت یک پل (Bridge) بین جاوااسکریپت و سیستم‌عامل عمل می‌کند. این ماژول‌ها زمانی مورد نیاز هستند که قابلیت مورد نظر در ریکت نیتیو به صورت پیش‌فرض وجود ندارد یا استفاده از آن با روش‌های جاوااسکریپت امکان‌پذیر نیست.

خروجی گرفتن ریکت نیتیو

روش نوشتن ماژول در React Native

برای ایجاد یک ماژول نیتیو، مراحل زیر را دنبال می‌کنیم:

1. ایجاد ماژول نیتیو برای اندروید

الف) افزودن کلاس نیتیو

ابتدا یک کلاس جاوا ایجاد کرده و آن را از ReactContextBaseJavaModule ارث‌بری کنید:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
package com.example;
 
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.Promise;
 
public class MyNativeModule extends ReactContextBaseJavaModule {
    public MyNativeModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }
 
    @Override
    public String getName() {
        return "MyNativeModule";
    }
 
    @ReactMethod
    public void getMessage(Promise promise) {
        promise.resolve("Hello from Android Native Module!");
    }
}

ب) ثبت ماژول در پکیج

ماژول را در MyPackage.java ثبت کنید:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
package com.example;
 
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import java.util.Collections;
import java.util.List;
 
public class MyPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        return Collections.singletonList(new MyNativeModule(reactContext));
    }
}

ج) افزودن به MainApplication.java

1
2
3
4
5
6
7
@Override
protected List<ReactPackage> getPackages() {
    return Arrays.asList(
        new MainReactPackage(),
        new MyPackage()
    );
}

2. ایجاد ماژول نیتیو برای iOS

الف) ایجاد فایل Objective-C یا Swift

یک کلاس جدید ایجاد کرده و آن را از RCTBridgeModule ارث‌بری کنید:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#import <React/RCTBridgeModule.h>
 
@interface MyNativeModule : NSObject <RCTBridgeModule>
@end
 
@implementation MyNativeModule
 
RCT_EXPORT_MODULE();
 
RCT_EXPORT_METHOD(getMessage:(RCTPromiseResolveBlock)resolve
                  rejecter:(RCTPromiseRejectBlock)reject) {
    resolve(@"Hello from iOS Native Module!");
}
 
@end

3. استفاده از ماژول در ریکت نیتیو

پس از ایجاد ماژول‌های نیتیو، می‌توان آن‌ها را در جاوااسکریپت فراخوانی کرد:

1
2
3
4
5
6
import { NativeModules } from 'react-native';
const { MyNativeModule } = NativeModules;
 
MyNativeModule.getMessage().then(message => {
  console.log(message); // "Hello from Native Module!"
});

سوالات متداول

۱. آیا استفاده از ماژول‌های نیتیو در ریکت نیتیو الزامی است؟

خیر، ریکت نیتیو دارای بسیاری از قابلیت‌های داخلی است. اما اگر به قابلیت‌های پیشرفته دستگاه نیاز داشته باشید، ممکن است نیاز به استفاده از ماژول‌های نیتیو پیدا کنید.

مهاجرت از ریکت نیتیو به فلاتر: راهنمای کامل برای توسعه‌دهندگان
خواندن این مقاله

۲. آیا ماژول‌های نیتیو عملکرد را بهبود می‌بخشند؟

بله، در برخی موارد استفاده از ماژول‌های نیتیو باعث بهبود عملکرد و کاهش تأخیر در اجرای عملیات پیچیده می‌شود.

۳. آیا می‌توان از بسته‌های آماده به جای نوشتن ماژول نیتیو استفاده کرد؟

بله، بسیاری از ماژول‌های نیتیو مانند react-native-device-info یا react-native-fs از قبل توسعه داده شده‌اند و می‌توان از آن‌ها استفاده کرد.

نتیجه‌گیری

ماژول‌های نیتیو در ریکت نیتیو یک ابزار قدرتمند برای دستیابی به قابلیت‌های نیتیو در اپلیکیشن‌های موبایل هستند. در این مقاله، نحوه ایجاد و استفاده از این ماژول‌ها در اندروید و iOS را بررسی کردیم. با استفاده از این روش‌ها، می‌توانید عملکرد و قابلیت‌های اپلیکیشن خود را به سطح بالاتری ببرید.

دیدگاهتان را بنویسید