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

トラブルシューティング

これらは、React Nativeのセットアップ中に遭遇する可能性のある一般的な問題です。ここに記載されていない問題に遭遇した場合は、GitHubで問題を検索してみてください。

ポートが既に使用されている​

Metro bundlerはポート8081で実行されます。別のプロセスがすでにそのポートを使用している場合は、そのプロセスを終了するか、バンドラーが使用するポートを変更することができます。

ポート8081のプロセスを終了する​

次のコマンドを実行して、ポート8081をリッスンしているプロセスのIDを見つけます。

shell
sudo lsof -i :8081

次に、以下を実行してプロセスを終了します。

shell
kill -9 <PID>

Windowsでは、リソースモニターを使用してポート8081を使用しているプロセスを見つけ、タスクマネージャーを使用して停止できます。

8081以外のポートを使用する​

portパラメータを使用して、バンドラーが8081以外のポートを使用するように設定できます。プロジェクトのルートから以下を実行します。

shell
npm start -- --port=8088

また、新しいポートからJavaScriptバンドルをロードするようにアプリケーションを更新する必要があります。Xcodeからデバイスで実行している場合は、ios/__App_Name__.xcodeproj/project.pbxprojファイル内の8081を、選択したポート番号に更新することでこれを行うことができます。

NPMのロックエラー​

React Native CLIの使用中にnpm WARN locking Error: EACCESのようなエラーが発生した場合は、以下を実行してみてください。

shell
sudo chown -R $USER ~/.npm
sudo chown -R $USER /usr/local/lib/node_modules

Reactのライブラリが見つからない​

プロジェクトに手動でReact Nativeを追加した場合、RCTText.xcodeprojやRCTImage.xcodeprojなど、使用している関連するすべての依存関係が含まれていることを確認してください。次に、これらの依存関係によってビルドされたバイナリをアプリのバイナリにリンクする必要があります。Xcodeプロジェクト設定のLinked Frameworks and Binariesセクションを使用します。詳細な手順はこちらです：ライブラリのリンク。

CocoaPodsを使用している場合は、サブスペックと共にReactをPodfileに追加したことを確認してください。たとえば、<Text />、<Image />、およびfetch() APIを使用している場合、Podfileにこれらを追加する必要があります。

pod 'React', :path => '../node_modules/react-native', :subspecs => [
  'RCTText',
  'RCTImage',
  'RCTNetwork',
  'RCTWebSocket',
]

次に、pod installを実行し、プロジェクトにPods/ディレクトリが作成され、Reactがインストールされていることを確認してください。CocoaPodsは、インストールされたこれらの依存関係を使用できるように、これ以降は生成された.xcworkspaceファイルを使用するように指示します。

CocoaPodとして使用するとReact Nativeがコンパイルされない​

cocoapods-fix-react-nativeというCocoaPodsプラグインがあります。これは、依存関係マネージャーを使用する際の違いによるソースコードの事後修正を処理します。

引数リストが長すぎます：再帰的なヘッダー展開に失敗しました​

プロジェクトのビルド設定において、User Search Header PathsとHeader Search Pathsは、Xcodeがコードで指定された#importヘッダーファイルをどこで探すべきかを指定する2つの設定です。Podsの場合、CocoaPodsは検索対象とする特定のフォルダのデフォルト配列を使用します。この特定の設定が上書きされておらず、設定されているフォルダのいずれも大きすぎないことを確認してください。フォルダの1つが大きい場合、Xcodeはそのディレクトリ全体を再帰的に検索しようとし、ある時点で上記のエラーをスローします。

User Search Header PathsとHeader Search Pathsのビルド設定をCocoaPodsが設定したデフォルトに戻すには、ビルド設定パネルでエントリを選択し、deleteキーを押します。これにより、カスタムの上書きが削除され、CocoaPodのデフォルトに戻ります。

利用可能なトランスポートがありません​

React NativeはWebSocketのポリフィルを実装しています。これらのポリフィルは、import React from 'react'を介してアプリケーションに含めるreact-nativeモジュールの一部として初期化されます。Firebaseなど、WebSocketを必要とする別のモジュールをロードする場合は、必ずreact-nativeの後にロード/requireしてください。

import React from 'react';
import Firebase from 'firebase';

シェルコマンド無応答例外​

ShellCommandUnresponsiveExceptionのような例外が発生した場合：

Execution failed for task ':app:installDebug'.
  com.android.builder.testing.api.DeviceException: com.android.ddmlib.ShellCommandUnresponsiveException

android/build.gradleでGradleのバージョンを1.2.3にダウングレードしてみてください。

react-native initがハングする​

システムでnpx react-native initの実行がハングする問題に遭遇した場合は、詳細モードで再実行し、一般的な原因について#2797を参照してください。

shell
npx react-native init --verbose

プロセスをデバッグしている場合や、スローされているエラーについてもう少し詳しく知りたい場合は、verboseオプションを使用してより多くのログと情報を出力し、問題を特定したい場合があります。

プロジェクトのルートディレクトリで次のコマンドを実行します。

shell
npm run android -- --verbose

react-nativeパッケージマネージャーを起動できない（Linux上）​

ケース1：エラー "code":"ENOSPC","errno":"ENOSPC"​

inotify（Linuxでwatchmanが使用）が監視できるディレクトリの数が原因で発生する問題。これを解決するには、ターミナルウィンドウでこのコマンドを実行します。

shell
echo fs.inotify.max_user_watches=582222 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

エラー： spawnSync ./gradlew EACCES​

macOSでnpm run androidまたはyarn androidを実行すると上記のエラーが発生する場合、sudo chmod +x android/gradlewコマンドを実行してgradlewファイルを実行可能にしてみてください。