トラブルシューティング
ここでは、React Native のセットアップ中に発生する可能性のある一般的な問題を紹介します。ここに記載されていない問題に遭遇した場合は、GitHub で問題を検索してみてください。
ポートが既に使用中
Metro bundler はポート 8081 で実行されます。他のプロセスがすでにそのポートを使用している場合は、そのプロセスを終了するか、バンドラーが使用するポートを変更することができます。
ポート 8081 上のプロセスを終了する
ポート 8081 をリッスンしているプロセスの ID を見つけるには、次のコマンドを実行します。
sudo lsof -i :8081
次に、プロセスを終了するために次を実行します。
kill -9 <PID>
Windows では、リソース モニター を使用してポート 8081 を使用しているプロセスを見つけ、タスク マネージャーを使用して停止できます。
8081 以外のポートを使用する
プロジェクトのルートから port パラメーターを使用すると、バンドラーが 8081 以外のポートを使用するように構成できます。
- npm
- Yarn
npm start -- --port=8088
yarn 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 プロジェクト設定の 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 を実行し、React がインストールされた Pods/ ディレクトリがプロジェクトに作成されていることを確認します。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 で設定されたデフォルトに戻すには、ビルド設定パネルでエントリを選択し、削除を押します。これによりカスタムの上書きが削除され、CocoaPod のデフォルトに戻ります。
利用可能なトランスポートがありません
React Native は WebSockets のポリフィルを実装しています。これらの ポリフィル は、import React from 'react' を介してアプリケーションに含める react-native モジュールの一部として初期化されます。たとえば、Firebase など、WebSockets を必要とする別のモジュールを読み込む場合は、react-native の後にロード/要求するようにしてください。
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
ターミナルで次のコマンドを実行して、ADB サーバーを再起動します。
adb kill-server
adb start-server
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 ファイルを実行可能にしてみてください。