ライブラリの使用
React Native は、アプリですぐに使用できる組み込みのコアコンポーネントとAPIのセットを提供します。React Native にバンドルされているコンポーネントと API に限定されるわけではありません。React Native には何千人もの開発者のコミュニティがあります。コアコンポーネントと API で探しているものが見つからない場合は、コミュニティからライブラリを見つけてインストールして、アプリに機能を追加できる可能性があります。
パッケージマネージャの選択
React Nativeライブラリは通常、npmレジストリから、npm CLIやYarn ClassicなどのNode.jsパッケージマネージャを使用してインストールされます。
コンピュータに Node.js がインストールされている場合、npm CLI はすでにインストールされています。一部の開発者は、インストール時間がわずかに短く、ワークスペースなどの高度な機能が追加されているため、Yarn Classic を使用することを好みます。どちらのツールも React Native でうまく機能します。説明を簡単にするために、このガイドの残りの部分では npm を想定します。
💡 JavaScriptコミュニティでは、「ライブラリ」と「パッケージ」という用語は同じ意味で使用されます。
ライブラリのインストール
プロジェクトにライブラリをインストールするには、ターミナルでプロジェクトディレクトリに移動し、インストールコマンドを実行します。react-native-webview
でこれを試してみましょう。
- npm
- Yarn
npm install react-native-webview
yarn add react-native-webview
インストールしたライブラリにはネイティブコードが含まれているため、使用する前にアプリにリンクする必要があります。
iOSでのネイティブコードのリンク
React Nativeは、iOSプロジェクトの依存関係を管理するためにCocoaPodsを使用しており、ほとんどのReact Nativeライブラリもこの同じ規約に従っています。使用しているライブラリがそうでない場合は、追加の説明についてREADMEを参照してください。ほとんどの場合、次の手順が適用されます。
ネイティブiOSプロジェクトにリンクするために、ios
ディレクトリでpod install
を実行します。ios
ディレクトリに切り替えることなくこれを行うためのショートカットは、npx pod-install
を実行することです。
npx pod-install
これが完了したら、アプリのバイナリを再ビルドして、新しいライブラリの使用を開始します。
- npm
- Yarn
npm run ios
yarn ios
Androidでのネイティブコードのリンク
React Nativeは、Androidプロジェクトの依存関係を管理するためにGradleを使用しています。ネイティブの依存関係を持つライブラリをインストールした後、新しいライブラリを使用するにはアプリのバイナリを再ビルドする必要があります。
- npm
- Yarn
npm run android
yarn android
ライブラリの検索
React Native Directoryは、React Native専用に構築されたライブラリの検索可能なデータベースです。これは、React Nativeアプリのライブラリを探す最初の場所です。
ディレクトリで見つかるライブラリの多くは、React Native CommunityまたはExpoのものです。
React Native Communityによって構築されたライブラリは、ボランティアとReact Nativeに依存している企業の個人によって推進されています。それらはしばしばiOS、tvOS、Android、Windowsをサポートしますが、これはプロジェクトによって異なります。この組織の多くのライブラリは、かつてReact NativeのコアコンポーネントとAPIでした。
Expoによって構築されたライブラリはすべてTypeScriptで記述されており、可能な限りiOS、Android、react-native-web
をサポートしています。
React Native Directoryの後、npmレジストリは、ディレクトリでReact Native専用のライブラリが見つからない場合の次の最適な場所です。npmレジストリはJavaScriptライブラリの決定的なソースですが、リストされているライブラリがすべてReact Nativeと互換性があるとは限りません。React Nativeは、Node.js、Webブラウザ、Electronなどを含む、多くのJavaScriptプログラミング環境の1つであり、npmにはこれらすべての環境で動作するライブラリが含まれています。
ライブラリの互換性の判断
React Nativeで動作しますか?
通常、他のプラットフォーム専用に構築されたライブラリは、React Nativeでは動作しません。例としては、Web用に構築され、特にreact-dom
を対象とするreact-select
や、Node.js用に構築され、コンピュータのファイルシステムと対話するrimraf
があります。lodash
のような他のライブラリは、JavaScriptの言語機能のみを使用し、あらゆる環境で動作します。時間とともにこの感覚が養われるでしょうが、それまでは、自分で試してみるのが最も簡単な方法です。React Nativeで動作しないことが判明した場合は、npm uninstall
を使用してパッケージを削除できます。
アプリがサポートするプラットフォームで動作しますか?
React Native Directoryを使用すると、iOS、Android、Web、Windowsなどのプラットフォームの互換性でフィルタリングできます。使用したいライブラリが現在そこにリストされていない場合は、詳細についてライブラリのREADMEを参照してください。
アプリのReact Nativeバージョンで動作しますか?
ライブラリの最新バージョンは、通常、React Nativeの最新バージョンと互換性があります。古いバージョンを使用している場合は、インストールする必要があるライブラリのバージョンを知るためにREADMEを参照してください。npm install <ライブラリ名>@<バージョン番号>
を実行して、特定のバージョンのライブラリをインストールできます。例:npm install @react-native-community/netinfo@^2.0.0
。