トラブルシューティング

ビルドに失敗する

React Native は様々な要因でビルドに失敗します。 ビルドの失敗の原因がわからないときは、次の作業を試してみてください。 特にビルドキャッシュの消去を推奨します。

ビルドキャッシュを消す

React Native はビルド過程のデータをキャッシュしてビルドを高速化しており、キャッシュが原因で変更内容が反映されずにビルドが失敗することがあります。 その場合は、すべてのキャッシュを消すとビルドに成功する可能性があります。

キャッシュを削除するには、次の作業を行います。

  • node_modules を削除し、 JavaScript ライブラリを再インストールする (yarn install
  • watchman の状態をリセットする (watchman watch-del-all)
  • Metro のキャッシュを削除する ($TMPDIR/metro-cache*)
  • Haste のキャッシュを削除する ($TMPDIR/haste-map-metro*)
  • (iOS) ビルドキャッシュを削除する (ios/build)
  • (iOS) CocoaPods のキャッシュを削除する (ios/Pods)

実行例:

$ rm -rf node_modules && \
  yarn install && \
  watchman watch-del-all && \
  rm -fr $TMPDIR/metro-cache* && \
  rm -fr $TMPDIR/haste-map-metro* && \
  rm -rf ios/build && \
  rm -rf ios/Pods && \

以上の作業でビルド環境をクリーンな状態に戻せます。 react-native link などの再セットアップの作業は不要です。

ネイティブモジュールを再リンクする

パッケージ情報 (package.json) の編集後にビルドに失敗するようになった場合は、次の手順でネイティブモジュールをリンクし直してみてください。

  • (iOS) ios/Podfile を変更前の状態に戻す (ios/Podfile)
  • ネイティブモジュールをリンクし直す (react-native unlink, react-native link)
  • (iOS) CocoaPods のライブラリをインストールし直す (pod install)

実行例:

$ git checkout ios/Podfile
$ react-native unlink
$ react-native link
$ cd ios; pod install

ローカルリポジトリの変更を破棄する

キャッシュを削除してもビルドに失敗する場合は、ローカルリポジトリの変更をすべて破棄してから、再びキャッシュを削除してビルドしてみてください。

実行例:

$ git clean -df
$ git checkout -- .

実機のロックを解除する (シミュレーター使用時)

実機をマシンに接続したまま react-native run-ios コマンドでアプリケーションをシミュレーターで起動したとき、ビルドキャッシュを消しても解決できないエラーが発生する場合があります。 その場合、 Metro Bundler の実行ログに次のメッセージが表示されていたら (実際は 1 行です) 、実機のロックを解除してからアプリケーションを再起動してみてください。

2018-07-03 23:00:08.580 xcodebuild[21803:1584692]
  iPhoneConnect: ## Unable to mount developer disk image,
  (Error Domain=com.apple.dtdevicekit Code=-402652958
  "Development cannot be enabled while your device is locked."
  UserInfo={NSLocalizedDescription=
  Development cannot be enabled while your device is locked.,
  com.apple.dtdevicekit.stacktrace=(
  ...

マシンを再起動する

以上の作業を行ってもまだビルドに失敗する場合は、ビルドに使用するマシンを再起動するとビルドに成功する場合があります。

コーディング

console.group is not a function

デバッグログの出力に console.group() を利用していると、このエラーが表示されてログを出力できない場合があります。 このエラーは Chrome をデバッグ用に起動していない場合に発生します。 実機またはシミュレーターにて、 React Native のリモートデバッグモードを有効にして Chrome を起動してみてください。

iOS 特有の問題

アプリケーションを実機にインストールできない

シミュレーターで起動できるのに実機にインストールできない場合は、コード署名の設定が適切でない可能性があります。 Xcode プロジェクトを開き、コード署名の設定をし直してみてください。

アプリケーションが起動後にクラッシュする

実機またはシミュレーターでアプリケーションが起動後にクラッシュしてしまう場合は、実機やシミュレーターの OS のバージョンが、本ライブラリが指定するバージョンより低い可能性があります。

特に react-native run-ios コマンドでシミュレーターを利用する場合は、 --simulator オプションで必ずシミュレーターの種類を指定してください。 デフォルトで利用されるシミュレーターは iPhone 6 であり OS のバージョンが古いため、 iOS 10.0 以降のシミュレーターを指定する必要があります。

iPhone X のシミュレーターを指定する例:

$ react-native run-ios --simulator="iPhone X"

アプリケーションの起動後に赤い画面でエラーメッセージが表示される

アプリケーションの起動後に赤い画面でエラーメッセージが表示されて先に進まない場合は、以下の原因が考えられます。

  • JavaScript のコードに文法エラーがある。
  • JavaScript のコードが実行時エラーを発生している。
  • React Native アプリケーション実行環境 (Metro, node-haste) がキャッシュしている他のアプリケーションの情報が競合している。

次のいくつかの対処法が考えられます。

  • JavaScript のコードに文法エラーがないかどうか確認する。
  • デバッグモードでエラー原因を確認する。
  • ビルドキャッシュを削除する。それでもエラーが発生する場合は、 実行したことがあるすべてのアプリケーションの node_modules を削除してみてください。

ネイティブコードを呼び出す箇所でエラーになる

Podfile 中で use_frameworks! が記述されているとエラーになる可能性があります。 React Native では use_frameworks! はビルドの失敗の原因になるため、 use_frameworks! が記述されていたら削除してください。

Swift のコードをビルドできない、または動作しない

本ライブラリは Swift に対応していません。 Swift で CocoaPods のライブラリを利用するには Podfile 中に use_frameworks! を記述する必要があるためです。 React Native では use_frameworks! はビルドの失敗の原因になるため、本ライブラリでは use_frameworks! の記述を推奨しません。

WebRTC の問題

RTCPeerConnection.iceConnectionState の値が checking から変わらない

接続が成功したにも関わらず、 iceConnectionState プロパティの値が checking のままで completed にならない場合があります。 その場合、 connectionState プロパティの値も connecting の状態が続きます。

これは WebRTC ライブラリの問題であり、発生条件は不明です (本ライブラリは極力 WebRTC ライブラリの API に手を加えないようにしているので、対策を実装する予定はありません) 。 接続状態に依存する処理を実装する場合は、これらのプロパティ以外の方法で接続状態を検出する処理を実装することをお勧めします。