Hướng dẫn viết Native Module (Swift / Kotlin) kết nối với React Native

Mặc dù hệ sinh thái npm của React Native có hàng trăm ngàn thư viện có sẵn, nhưng sẽ có lúc dự án của bạn cần gọi một SDK bảo mật của Ngân hàng, tương tác phần cứng thiết bị chuyên dụng hoặc chạy một thuật toán mã hóa riêng. Đó là lúc bạn cần biết cách tự viết Native Module bằng Swift (iOS) và Kotlin (Android)!

1. Quy trình kết nối Native Module trong React Native

Một Native Module gồm 3 phần:

1. Mã nguồn Native (Swift / Kotlin): Chứa hàm thực thi các tính năng hệ điều hành.
2. Mã bọc Bridge / TurboModule: Khai báo các hàm cho phép JavaScript nhìn thấy.
3. Mã gọi JavaScript: Gọi hàm qua NativeModules.ModuleName.functionName().

2. Hướng dẫn tạo Native Module lấy dung lượng Pin (Battery Level)

Viết mã Kotlin cho Android (BatteryModule.kt)

class BatteryModule(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) {
    override fun getName() = "BatteryModule"

    @ReactMethod
    function getBatteryLevel(promise: Promise) {
        val bm = reactApplicationContext.getSystemService(Context.BATTERY_SERVICE) as BatteryManager
        val batLevel = bm.getIntProperty(BatteryManager.BATTERY_PROPERTY_CAPACITY)
        promise.resolve(batLevel)
    }
}

Viết mã Swift cho iOS (BatteryModule.swift)

@objc(BatteryModule)
class BatteryModule: NSObject {
  @objc func getBatteryLevel(_ resolve: @escaping RCTPromiseResolveBlock, rejecter reject: @escaping RCTPromiseRejectBlock) {
    UIDevice.current.isBatteryMonitoringEnabled = true
    let level = Int(UIDevice.current.batteryLevel * 100)
    resolve(level)
  }
}

Gọi từ JavaScript trong React Native

import { NativeModules } from 'react-native';
const { BatteryModule } = NativeModules;

async function checkBattery() {
  const level = await BatteryModule.getBatteryLevel();
  console.log('Dung lượng pin hiện tại:', level, '%');
}

Kết luận

Kỹ năng viết Native Module giúp nhà phát triển React Native tự tin chinh phục mọi bài toán tích hợp phần cứng phức tạp. Uwmee Software sở hữu đội ngũ lập trình viên làm chủ cả Native Code (Swift/Kotlin) và Cross-Platform. Đọc thêm bài viết React Native New Architecture.