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

トラブルシューティング

React Nativeの設定中に発生する可能性のある一般的な問題をいくつか示します。ここに記載されていない問題が発生した場合は、GitHubで問題を検索してみてください。

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

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

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

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

sudo lsof -i :8081

次に、プロセスを終了するには次のコマンドを実行します。

kill -9 <PID>

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

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

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

npm start -- --port=8088

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

NPMロックエラー​

React Native CLIを使用中に`npm WARN locking Error: EACCES`などのエラーが発生した場合は、次のコマンドを実行してみてください。

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

React用のライブラリが見つかりません​

プロジェクトにReact Nativeを手動で追加した場合は、`RCTText.xcodeproj`、`RCTImage.xcodeproj`など、使用しているすべての関連する依存関係を含んでいることを確認してください。次に、これらの依存関係によって構築されたバイナリをアプリバイナリにリンクする必要があります。Xcodeプロジェクトの設定で「リンクされたフレームワークとバイナリ」セクションを使用します。詳細な手順はこちらです。ライブラリのリンク。

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

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

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

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

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

引数が長すぎます: 再帰的なヘッダー展開が失敗しました​

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

`User Search Header Paths`と`Header Search Paths`のビルド設定をCocoaPodsによるデフォルト設定に戻すには、ビルド設定パネルのエントリを選択し、削除ボタンを押します。これにより、カスタムオーバーライドが削除され、CocoaPodのデフォルトに戻ります。

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

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

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

Shellコマンド応答不能例外​

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を参照してください。

npx react-native init --verbose

プロセスのデバッグ中、またはスローされているエラーの詳細を知る必要がある場合は、冗長オプションを使用してより多くのログと情報を出力し、問題を特定することができます。

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

npm run android -- --verbose

React Nativeパッケージマネージャーの起動に失敗しました（Linuxの場合）​

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

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

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`ファイルをexecutableにします。