React-NativeでNativeモジュールを使う

Tomoumi Nishimura 10views 更新:2017年8月9日

React-Nativeでは基本的にjsでアプリの動作を記述していくことになりますが、どうしてもjsからは利用できないネイティブ機能が使いたくなることがあります。 そういう場合には、そのネイティブ機能をラップするモジュールを記述することで、利用することができます。

以下の手順は、iOSのネイティブ機能をSwiftを介して利用するための手順になります。

1. Swiftで実装する

以下のように、js側から利用したい機能をまとめたクラスをSwiftで実装します。

@objc(SampleModule)
class SampleModule: NSObject {

  @objc(showMessage:by)
  func showMessage(message: NSString, by: NSString) -> Void {
    console.log("[\(by)] \(message)")
  }

}

2. SwiftファイルをRNに認識させるためのBridgingファイルを作成する

Swiftではマクロが使えないため、以下のような内容のObj-Cファイルを作成することでSwiftファイルを認識させます。

#import <React/RCTBridgeModule.h>

@interface RCT_EXTERN_MODULE(SampleModule, NSObject)

RCT_EXTERN_METHOD(showMessage:(NSString *)message by:(NSString *)by)

@end

3. Bridging-Headerを作る

Bridging-headerはObject-CファイルとSwiftファイルをブリッジする際に利用するもの(自動生成されているはず)ですが、ここにReact-Nativeとネイティブコードをブリッジするヘッダをimportする必要があります。

したがって、Bridging-header.hに以下の一行を追加します。

#import <React/RCTBridgeModule.h>

4. React-Nativeから利用する

ここまでの手順で、RNから利用する準備は整いました。 以下のようにすれば、RNのjsファイルから上のSwiftファイルで実装した機能が利用できるはず。

import {
  NativeModules,
} from 'react-native';

NativeModules.SampleModule.showMessage("hello, world!", "React-Native")

参考

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません