メインコンテンツへスキップ

ネイティブモジュールの紹介

情報

ネイティブモジュールとネイティブコンポーネントは、レガシーアーキテクチャで使用される安定した技術です。これらは、新しいアーキテクチャが安定した将来、非推奨となる予定です。新しいアーキテクチャでは、同様の結果を得るためにTurbo Native ModuleFabric Native Componentsを使用します。

React Nativeアプリでは、デフォルトではJavaScriptで利用できないネイティブプラットフォームのAPIにアクセスする必要がある場合があります。例えば、Apple PayやGoogle PayにアクセスするためのネイティブAPIなどです。また、既存のObjective-C, Swift, Java, C++のライブラリをJavaScriptで再実装することなく再利用したい場合や、画像処理のような処理のために高性能なマルチスレッドコードを書きたい場合もあるでしょう。

NativeModuleシステムは、Java/Objective-C/C++(ネイティブ)クラスのインスタンスをJavaScript(JS)オブジェクトとしてJavaScript(JS)に公開し、JS内から任意のネイティブコードを実行できるようにします。この機能が通常の開発プロセスの一部になることは想定していませんが、存在することが不可欠です。もしReact NativeがJSアプリで必要なネイティブAPIをエクスポートしていない場合、自分でエクスポートできるべきです!

ネイティブモジュールのセットアップ

React Nativeアプリケーション用にネイティブモジュールを作成するには、いくつかの異なる方法があります。

  1. React Nativeアプリケーションにインポートできるローカルライブラリを作成する。詳細はローカルライブラリの作成ガイドをお読みください。
  2. React NativeアプリケーションのiOS/Androidプロジェクト内に直接作成する。
  3. あなたの、あるいは他のReact Nativeアプリケーションが依存関係としてインストールできるNPMパッケージとして作成する。

このガイドでは、まずReact Nativeアプリケーション内に直接ネイティブモジュールを実装する方法を説明します。ただし、以下のガイドで作成するネイティブモジュールはNPMパッケージとして配布することも可能です。もし興味があればネイティブモジュールをNPMパッケージとしてセットアップするガイドをご覧ください。

はじめに

以下のセクションでは、React Nativeアプリケーション内に直接ネイティブモジュールを構築する方法について説明します。前提条件として、作業を行うためのReact Nativeアプリケーションが必要です。まだ持っていない場合は、こちらの手順に従ってReact Nativeアプリケーションをセットアップしてください。

例えば、React Nativeアプリケーション内のJavaScriptからiOS/AndroidのネイティブカレンダーAPIにアクセスしてカレンダーイベントを作成したいとします。React Nativeは、ネイティブのカレンダーライブラリと通信するためのJavaScript APIを公開していません。しかし、ネイティブモジュールを通じて、ネイティブのカレンダーAPIと通信するネイティブコードを書くことができます。そして、そのネイティブコードをReact NativeアプリケーションのJavaScriptから呼び出すことができます。

以下のセクションでは、AndroidiOSの両方で、そのようなカレンダーネイティブモジュールを作成します。