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

ローカルライブラリのセットアップ

ローカルライブラリとは、アプリローカルでレジストリに公開されないビューまたはモジュールを含むライブラリです。これは、ローカルライブラリはアプリのネイティブコードから切り離されているという点で、ビューやモジュールの従来のセットアップとは異なります。

ローカルライブラリは、android/フォルダとios/フォルダの外側に作成され、オートリンキングを使用してアプリと統合します。ローカルライブラリを含む構造は次のようになります。

MyApp
├── node_modules
├── modules <-- folder for your local libraries
│ └── awesome-module <-- your local library
├── android
├── ios
├── src
├── index.js
└── package.json

ローカルライブラリのコードはandroid/フォルダとios/フォルダの外側に存在するため、将来React Nativeのバージョンアップが容易になり、他のプロジェクトにコピーすることも容易になります。

ローカルライブラリを作成するには、create-react-native-libraryを使用します。このツールには、必要なテンプレートがすべて含まれています。

はじめに​

React Nativeアプリケーションのルートフォルダ内で、次のコマンドを実行します。

npx create-react-native-library@latest awesome-module

ここで、awesome-moduleは新しいモジュールに付ける名前です。プロンプトに従って操作すると、プロジェクトのルートディレクトリにmodulesという新しいフォルダが作成され、その中に新しいモジュールが含まれます。

リンク​

デフォルトでは、Yarnを使用する場合はlink:プロトコル、npmを使用する場合はfile:プロトコルを使用して、生成されたライブラリは自動的にプロジェクトにリンクされます。

"dependencies": {
  "awesome-module": "file:./modules/awesome-module"
}

これにより、node_modules下にライブラリへのシンボリックリンクが作成され、オートリンキングが機能します。

依存関係のインストール​

モジュールをリンクするには、依存関係をインストールする必要があります。

npm install

アプリ内でのモジュールの使用​

アプリ内でモジュールを使用するには、名前でインポートできます。

import {multiply} from 'awesome-module';