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

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

情報

Native ModuleとNative Componentsは、レガシーアーキテクチャで使用されている安定したテクノロジーです。これらは、新しいアーキテクチャが安定すると、将来的に非推奨になります。新しいアーキテクチャは、同様の結果を達成するために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) に JS オブジェクトとして公開し、JS 内から任意のネイティブコードを実行できるようにします。この機能が通常の開発プロセスの一部になるとは期待していませんが、存在することは不可欠です。JS アプリが必要とするネイティブ API を React Native がエクスポートしていない場合、自分でエクスポートできるはずです。

ネイティブモジュールの設定

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 の両方で、このようなカレンダーネイティブモジュールを作成します。