【iOS・Swift】React NativeでNative Modulesを実装する方法を解説

React NativeでiOS向けにSwiftを用いて、Native Modulesを実装する方法を解説します。

モグモグさん

出来るだけ分かりやすく解説していきます。

この記事でわかること

Native Modulesがわかる
Swiftを用いてカスタムのNative Modulesを作成することができる

バージョン

React 17.0.2
React Native 0.65.1

モグモグさん

Objective-Cで実装する方法についてはこちらで解説しています。

【iOS・Objective-C】React NativeでNative Modulesを実装する方法を解説

Native Modulesとは？
事前準備(ベースのアプリを作成)
Native Modulesの作成
JavaScript側から使う
まとめ

Native Modulesとは？

Native Modulesについて簡単に解説します。

モグモグさん

すでに理解している方はスキップしてください。

Native Modulesとは、React Nativeで用意されていない機能をネイティブで実装するための機能です。

アプリの要件によって、React Nativeがもともと用意していない機能を足したり、パフォーマンスの観点等でネイティブで実装すべき箇所をNative Modulesを使って実装したりすることが多いです。

React Nativeでも多くのことがすでにできますが、Native Modulesを使うことで幅が広がります。

iOS: Objective-CとSwiftどちらでも実装可能
Android: JavaとKotlinどちらでも実装可能

本記事では紹介しませんが、UIに関連するものは、Native UI Componentsを利用します。

モグモグさん

それぞれのドキュメントを貼っておきますので参考にしてください。

Native Modulesドキュメント(iOS)

Native Modulesドキュメント(Android)

Native UI Componentsドキュメント(iOS)

Native UI Componentsドキュメント(Android)

事前準備(ベースのアプリを作成)

まずは、React Nativeでアプリを作成しましょう。

この記事では、NativeModuleExampleというプロジェクトを作成しました。

モグモグさん

すでに作成済みの方はスキップでOKです！

こちらの記事も参考にしてください。

【ReactNative入門】Macで開発環境を作って始める

Native Modulesの作成

それでは、Native Modulesを作成していきます。

CustomNativeModuleファイルの作成

まずは、Swiftファイルを作成します。

本記事では、CustomNativeModuleSwiftというファイル名にしましたが、任意の名前にしてください。

モグモグさん

次で解説しますが、Objective-C bridging headerを作成しますか？というポップアップが表示される場合は作成してください。

よく使いそうなメソッド + 具体的なメソッドを実装しています。

シンプルなメソッド
callbackを返すメソッド
引数を取るメソッド
Promiseを扱うメソッド
OSのバージョンを返すメソッド

モグモグさん

重要なポイントはコメントに記載しているので、確認してください。

import Foundation

// @objc(CustomNativeModuleSwift)の箇所が重要
@objc(CustomNativeModuleSwift) class CustomNativeModuleSwift: NSObject {
  @objc static func requiresMainQueueSetup() -> Bool { return true }
  
  // 出力するだけのメソッド
  @objc public func funcSimple() {
    print("funcSimple")
  }
  
  // callbackメソッド
  @objc public func funcCallback(_ callback: RCTResponseSenderBlock) {
    callback(["funcCallback"])
  }
  
  // 引数を取るcallbackメソッド
  @objc public func funcCallbackWithParams(_ param: String, callback: RCTResponseSenderBlock) {
    callback(["funcCallbackWithParams: '\(param)'"])
  }
  
  // Promise resolveパターンのメソッド
  @objc public func funcResolvePromise(
    _ resolve: RCTPromiseResolveBlock,
    rejecter reject: RCTPromiseRejectBlock
    ) {
    resolve("funcResolvePromise")
  }
  
  // Promise rejectパターンのメソッド
  @objc public func funcRejectPromise(
    _ resolve: RCTPromiseResolveBlock,
    rejecter reject: RCTPromiseRejectBlock
  ) {
    reject("error", "funcRejectPromise", nil)
  }
  
  // 実用例: デバイスの名前を返すメソッド
  @objc public func getDeviceName(
      _ callback: RCTResponseSenderBlock
    ) {
    callback([UIDevice.current.name])
    }
}

Objective-C Bridging headerを作成

続いてObjective-C bridging headerを作成します。

import <React/RCTBridgeModule.hを追加するだけですが、忘れないようにしましょう。

#import <React/RCTBridgeModule.h>

Objective-Cファイルを作成しJavaScriptから使えるようにする

続いて、Objective-Cのファイルを作成して、JavaScriptから定義したModuleとメソッドを使えるようにしていきます。

RCT_EXTERN_MODULE: Moduleを記載
RCT_EXTERN_METHOD: メソッドを記載

#import "React/RCTBridgeModule.h"

@interface RCT_EXTERN_MODULE(CustomNativeModuleSwift, NSObject)
  RCT_EXTERN_METHOD(getDeviceName:
    (RCTResponseSenderBlock) callback
  )
  RCT_EXTERN_METHOD(funcSimple)
  RCT_EXTERN_METHOD(funcCallback:
    (RCTResponseSenderBlock) callback
  )
  RCT_EXTERN_METHOD(funcCallbackWithParams:
    (NSString *) param
    callback: (RCTResponseSenderBlock)callback
  )
  RCT_EXTERN_METHOD(
    funcResolvePromise: (RCTPromiseResolveBlock) resolve
    rejecter: (RCTPromiseRejectBlock) reject
  )
  RCT_EXTERN_METHOD(funcRejectPromise:
    (RCTPromiseResolveBlock) resolve
    rejecter: (RCTPromiseRejectBlock) reject
  )
@end

JavaScript側から使う

カスタムのNative Modulesを作成したので、JavaScript側から使う方法を解説していきます。

App.jsでimport

Moduleの名前は、ご自身で定義したものを使ってください。

import {NativeModules} from 'react-native';

const App = () => {
  const {CustomNativeModuleSwift} = NativeModules;
}

各メソッドを呼ぶ

呼ぶ場所は、任意ですが本記事では、useEffect内でそれぞれのメソッドを呼んでみました。

const App = () => {
  useEffect(() => {
    CustomNativeModuleSwift.getDeviceName(name => {
      console.log(name);
    });
    CustomNativeModuleSwift.funcSimple();
    CustomNativeModuleSwift.funcCallback(result => {
      console.log(result);
    });
    CustomNativeModuleSwift.funcCallbackWithParams('test', (result, param) => {
      console.log(result, param);
    });

    (async () => {
      const result = await CustomNativeModuleSwift.funcResolvePromise();
      console.log(result);
    })();

    (async () => {
      try {
        await CustomNativeModuleSwift.funcRejectPromise();
      } catch (err) {
        console.error(err);
      }
    })();

  }, []);
}

実行結果