Argano の松田です。 先日、[Android] React Native で JavaScript からネイティブコードを呼び出す方法という記事を書きました。 本記事では iOS 版をご紹介したいと思います。
Native Module
Native Module は、Objective-C、Swift、Java、Kotlin、C++ クラスのインスタンスを JavaScript オブジェクトとして公開し、それによって JavaScript の中から任意のネイティブコードを実行できるようにするものです。
今回は React Native アプリケーション内の JavaScript から ネイティブのメソッドを実行してみます。
最終的には、JavaScript から MyModule.log('Test'); を呼び出し、ネイティブにログ出力できるようにします。
Native Module の作成
環境構築は終わっている前提で進めます。iOS の Native Module を作成するには Objective-C か Swift を選ぶことができますが、今回は Objective-C を使用します。 まず、Native Module のヘッダーファイルと実装ファイルを作成します。
ヘッダーファイル RCTMyModule.h の内容
#import <React/RCTBridgeModule.h>
@interface MyModule : NSObject <RCTBridgeModule>
@end
実装ファイル RCTMyModule.m の内容
#import "RCTMyModule.h"
@implementation RCTMyModule
RCT_EXPORT_MODULE();
@end
Native メソッドを JavaScript に書き出す
React Native は、明示的に指示されない限り、Native Module 内のメソッドを JavaScript に公開することはありません。公開したい場合 RCT_EXPORT_METHOD マクロを使用して行うことができます。
// RCTMyModule.m
#import "RCTMyModule.h"
@implementation RCTMyModule
RCT_EXPORT_MODULE();
RCT_EXPORT_METHOD(log:(NSString *)content)
{
RCTLogInfo(@"Cessage: %@", content);
}
@end
Native Module を JavaScript から呼び出す
JavaScript から Native Module にアクセスするためには、まず React Native から NativeModules をインポートする必要があります。
import { NativeModules } from 'react-native';
そして、NativeModules から MyModule のネイティブモジュールにアクセスできるようになります。
const { MyModule } = NativeModules;
あとは 実装したメソッドを呼び出すだけです。
const onPress = () => {
MyModule.log('test log');
};
最後に再ビルドを実行します。Native Module を修正した場合は JavaScript を修正した場合と違い、ホットリロードが効かないため注意が必要です。
npx react-native run-ios
まとめ
Native Module の基本的な使い方を見てきました。Android より多少手順が少なく実装できます。 JavaScript にイベントを送信したり、ライフサイクルメソッドを使用したりすることもできます。 React Native であれど、かなり柔軟にさまざまな要件を満たせそうです。