Network response timed out.

何の記事？

下記の記事の通り「create-react-native-app」を用いて、React Nativeの開発環境を作成していたところ、タイトルのエラーが発生し、Android端末からアプリの動作確認ができなかったため、その解決策を記載しておくもの。

mae.chab.in

動作環境

• 開発環境：Windows 10 Pro

- Node: v8.2.1
- NPM: 4.6.1（2017/12/17現在、NPMv5はReact Nativeのサポート対象外で、NPMv5だとcreate-react-native-appコマンドが完了できない）

• アプリ動作環境：Android 7.0 Galaxy S8
• 開発環境とアプリ動作環境であるAndroid端末は同じLAN（今回は同一のmobile wifiネットワーク）に繋がっている前提

エラーの発生状況

再現手順

• 開発環境で以下コマンドを実行(すでにcreate-react-native-appはインストール済みとする。)

  create-react-native-app sample-app
  cd sample-app
  npm start

• Android側

- 事前にExpoアプリインストール済み
Expo - Google Play の Android アプリ

- エラー画面

原因と解決策

原因

• React NativeのPackagerが起動しているローカルIPアドレスが、mobile wifiと接続しているNICのIPアドレスではなく、別のNICのIPアドレスだった。
• 具体的には、ipconfigで表示される「イーサネット アダプター」の項目に設定されている「IPv4 アドレス」で起動していたため。

解決策

• mobile wifiネットワークで割り振られているローカルipアドレスで起動されるように設定する。
• 具体的な設定コマンド

set REACT_NATIVE_PACKAGER_HOSTNAME=xxx.xxx.xxx.xxx

• xxx.xxx.xxx.xxxには、ipconfigコマンドを実行した際に表示される「Wireless LAN adapter Wifi」の「IPv4 アドレス」に表示されているIPアドレスを記載する。