RN ネイティブ モジュール開発の学習に推奨されるオープンソース ライブラリ - react-native-ble-manager

例えば、RNのネイティブモジュール/Native Modulesの開発は非常に重要なスキルですが、RNの公式サイトにあるサンプルは比較的簡単なもので、最近触って使ってみたり、reactのソースコードの一部を読んだりしました。 -native-ble - manager には、ネイティブ モジュールに関連する知識ポイント/技術ポイントが完全に含まれていることがわかりました。そのため、一緒に学び、コミュニケーションをとるために、皆さんにお勧めします。以下に示すように、react-native-ble-Manager は RN 開発環境の Bluetooth 低電力ライブラリであり、RN アプリケーションでの低電力 Bluetooth 通信機能のプログラミングに使用されます。

React-native-ble-manager のコード構造

コードの量はそれほど多くありませんが、ネイティブ プラットフォームで Bluetooth 開発/API の基盤があれば、読みやすくなります。

階層化された思考に基づいてネイティブ モジュールを理解する

たとえば、Android ネイティブ モジュールのガイドライン

は次のとおりです RN プロジェクトの開発では、ほとんどの場合、ビジネス ロジックや基本ライブラリは基本的に JS/TS コードで整理されて記述されますが、実際には RN モジュールのほとんどが私たちが使用する 3 つの側面はすべて、ネイティブ モジュールの形式の SDK です。ネイティブ モジュールの形式で SDK をビルドするよりも、ネイティブ モジュールをプロジェクトに追加する方が簡単で、SDK はビルドとパッケージ化も行う必要があります。以下は、階層化アーキテクチャの考え方に基づくネイティブ モジュールについての私の理解です。名前が示すように、ネイティブ モジュールは、ネイティブ プラットフォームの API や機能に依存して使用する必要があるモジュールです。このモジュールは上位レベルの業務用の通常の JS モジュールであるため、ネイティブ モジュールには実際には 2 つのサブモジュールがあります。モジュール、1 つは JS モジュール、もう 1 つはプラットフォーム層モジュールです。JS モジュールは、インターフェイス モジュールと呼ばれる上位層の JS ビジネス モジュールに直接サービスを提供します。プラットフォーム層モジュールは、プラットフォームを使用する内部実装モジュールです。プラットフォーム層の機能特性を直接使用する層言語。ネイティブ モジュールの JS コードはプラットフォーム層コードとどのように通信/対話しますか? この種のシーンでは、グルー レイヤーを導入して対応する必要がありますが、RN フレームワークがこのグルー レイヤーの機能をすでに提供しているため、Android jni 開発のようにグルー レイヤーの構築に多くのエネルギーを費やす必要はありません。したがって、RN ネイティブ モジュールの開発された仕様を使用して、ライン上で関連するコードを構築して記述します

役割の観点からネイティブ モジュールを理解する

React-native-ble-manager を通じてネイティブ モジュールを確認する

Androidプラットフォームをメインに導入

主要文書

メインクラス図

スキャンインターフェイスからJSとネイティブ間の対話を確認します。

JSのスキャンインターフェースからJava層のスキャンインターフェースまで、コールバックメソッドを使用したパラメータの型の変換と、JSがネイティブメソッドを呼び出した後のコールバック処理を大まかに理解できます。

//js代码调scan，RN框架会帮忙代到并调到对应native层的scan方法，同时调用该方法时会做js数据类型到java数据类型的转换
 bleManager.scan(
        serviceUUIDs,
        seconds,
        allowDuplicates,
        scanningOptions,
        //下面这个就是一个js function对应到java就是一个callback类型
        (error: string | null) => {
    
    
          if (error) {
    
    
            reject(error);
          } else {
    
    
            fulfill();
          }
        }
      );
    });
//如下是java代码，BleManager.java类中scan方法
 @ReactMethod
    public void scan(ReadableArray serviceUUIDs, final int scanSeconds, boolean allowDuplicates, ReadableMap options,
                     Callback callback) {
    
    
        Log.d(LOG_TAG, "scan");
        if (getBluetoothAdapter() == null) {
    
    
            Log.d(LOG_TAG, "No bluetooth support");
            callback.invoke("No bluetooth support");
            return;
        }
        if (!getBluetoothAdapter().isEnabled()) {
    
    
            return;
        }

        synchronized (peripherals) {
    
    
            for (Iterator<Map.Entry<String, Peripheral>> iterator = peripherals.entrySet().iterator(); iterator
                    .hasNext(); ) {
    
    
                Map.Entry<String, Peripheral> entry = iterator.next();
                if (!(entry.getValue().isConnected() || entry.getValue().isConnecting())) {
    
    
                    iterator.remove();
                }
            }
        }

        if (scanManager != null)
            scanManager.scan(serviceUUIDs, scanSeconds, options, callback);
    }

上記の JS コードの scan メソッドのパラメータに注目して、以下の JS データ型と JAVA データ型の関係をコードで確認してください。
特に、コールバックと関数の間のマッピングを理解することが重要です。コールバックは、ネイティブ メソッドが js をコールバックするときによく使用されるためです。ネイティブが積極的に js と対話するケースを見てみましょう。現在、EventEmitter メカニズムは

、交流。つまり、JS がイベントを登録する必要があり、ネイティブ側は対応するイベントを送信できます。Jvmruntime から Js ランタイムへのグルー レイヤー RN は、対応するエミッター コンポーネントを呼び出すだけで、このイベントを実現するのに役立ちました。以下は、
JS 側でイベントを登録するためのコードです。

const BleManagerModule = NativeModules.BleManager;
const bleManagerEmitter = new NativeEventEmitter(BleManagerModule);
//注删事件ID是一个String，如下面的 BleManagerDiscoverPeripheral，然后我们去native端的代码去搜索BleManagerDiscoverPeripheral
....
 const listeners = [
      bleManagerEmitter.addListener(
        'BleManagerDiscoverPeripheral',
        handleDiscoverPeripheral,
      ),
      bleManagerEmitter.addListener('BleManagerStopScan', handleStopScan),
      bleManagerEmitter.addListener(
        'BleManagerDisconnectPeripheral',
        handleDisconnectedPeripheral,
      ),
      bleManagerEmitter.addListener(
        'BleManagerDidUpdateValueForCharacteristic',
        handleUpdateValueForCharacteristic,
      ),
    ];

//通过BleManagerDiscoverPeripheral看到native的有这样的代码, 
private void onDiscoveredPeripheral(final ScanResult result) {
    
    
        .....

        WritableMap map = peripheral.asWritableMap();
        bleManager.sendEvent("BleManagerDiscoverPeripheral", map);
    }

 public void sendEvent(String eventName, @Nullable WritableMap params) {
    
    
      getReactApplicationContext().getJSModule(RCTNativeAppEventEmitter.class).emit(eventName, params);
 }

要約する

1. ネイティブ側は RCTNativeAppEventEmitter を使用してイベントを送信し、JS 側は NativeEventEmitter を使用してイベントを登録する、つまり、下位層が上位層とアクティブに通信できる 2. 呼び出し結果を返す通常の操作としてコールバックがよく使用され
ますネイティブ メソッドから JS ランタイムへのメソッド呼び出し、つまりメソッド呼び出しと結果が返される、双方向の操作です。

提案

1. Webstorm を使用してターゲット全体を開き、js/ts コードを読みやすくします。
2. AS を使用して Android ディレクトリを開き、Java コードを読みやすくします。
3. xcode または appcode を使用して ios ディレクトリを開き、iOS コードを読みやすくします。