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

React NativeでAndroid向けにObjective-Cを用いて、Native Modulesを実装する方法を解説します。

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

Native Modulesとは？

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

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

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

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

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

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

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

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

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

Native Modulesの作成

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

今回は、デバイスの名前を返すメソッドを実装していきます。

headerファイルの作成

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

#import <React/RCTBridgeModule.h>

@interface CustomNativeModuleObjc : NSObject <RCTBridgeModule>
@end

.mファイルの実装

続いて実装を追加します。

主なポイントは下記の点です。

#import "CustomNativeModuleObjc.h"
#import <UIKit/UIKit.h>

@implementation CustomNativeModuleObjc

RCT_EXPORT_MODULE();

// RCT_EXPORT_METHOD: メソッドをJS側から呼べるようにする
RCT_EXPORT_METHOD(getDeviceName:(RCTResponseSenderBlock)callback) {
  @try{
     NSString *deviceName = [[UIDevice currentDevice] name];
     callback(@[[NSNull null], deviceName]);
   }
   @catch(NSException *exception){
     callback(@[exception.reason, [NSNull null]]);
   }
}
@end

JavaScript側から使う

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

App.jsでimport

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

import {NativeModules} from 'react-native';

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

メソッドを呼ぶ

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

const App = () => {
  useEffect(() => {
    CustomNativeModuleObjc.getDeviceName((err, name) => {
      console.log(err, name);
    });
  }, []);
}

実行結果

null 'iPhone 12'のように出力されると思います。

まとめ

iOS向けにObjective-Cを用いて、NativeModulesを実装する方法を解説しました。

React Nativeを実装する上で非常に有用なので、ぜひ実際に使ってみてください！