ネットワーク応答タイムアウトエラー（create-react-native-app）（expo）
Androidのexpoアプリでcreate-react-native-appを実行しようとしています。
まず、コマンドを書いてプロジェクトを作成しました
create-react-native-appテスト
それから私は実行しました
npm start
その後、expoアプリからqrコードをスキャンしました。
しかし、QRコードをスキャンした後、次のエラーが発生しています：
Uncaught Error: Java.net,sockettimeoutException: failed to connect to after 10000ms
Githubの問題：
https://github.com/react-community/create-react-native-app/issues/144#issuecomment-296631692
これは、マシンからポートを開かないためです。
Ubuntu Run Inターミナルで
Sudo ufw status verbose 19000ポートが開いていない場合に開いているポートを表示するには、次を使用してポートを開く必要があります。
Sudo ufw allow 19000/tcp
そして、再び実行します
Sudo ufw allow 19001/tcp
ネイティブに反応するためにhttpを提供するには、この方法を使用してubuntuでこの問題を解決します。これがあなたのお役に立てば幸いです。
TCPアクセス用にWindowsファイアウォールのポートを開くにはStartメニューで、Runをクリックし、WF.mscをクリックし、OKをクリックします。
セキュリティが強化されたWindowsファイアウォールの左ペインで、インバウンドルールをクリックし、アクションウィンドウでNew Ruleをクリックします。
Rule Typeダイアログボックスで、Portを選択し、Nextをクリックします。
Protocol and Portsダイアログボックスで、TCPを選択します。 Specific local portsを選択し、19000などのReactポートのインスタンスのポート番号を入力しますデフォルトのインスタンスの場合。 Nextをクリックします。
アクションダイアログボックスで、接続を許可を選択し、次へ。
Profileダイアログボックスで、データベースエンジンに接続するときのコンピューター接続環境を記述するプロファイルを選択し、Next。
Nameダイアログボックスで、このルールの名前と説明を入力し、Finishをクリックします。
同様に、ポート19001も開くことができます。
私の場合、ファイアウォールの設定だけではできませんでした。私の問題は、VirtualBoxネットワークデバイスが優先され、Expoホストが間違ったネットワークで起動していたことです。
Windowsでは、ipconfigを実行して、使用しているネットワークアダプターを確認できます。 npm/yarn startは、そのリストで最初に表示されるものをすべて使用するようです。
私はここからこれについて知りました： https://github.com/react-community/create-react-native-app/issues/6
リスト内の他のネットワークアダプターが必要ない場合は、コントロールパネルの[ネットワーク接続]インターフェイスでそれらを無効にできます。
これらの接続およびを使用する必要がある場合は、Expoを使用して問題を解決します このプロセス ：
- ジャンプコントロールパネル>ネットワークとインターネット>ネットワーク接続
- 目的の接続（優先度の高い接続）を右クリックします
- [プロパティ]> [インターネットプロトコルバージョン4]をクリックします
- [プロパティ]> [詳細]をクリックします
- 「自動メトリック」のチェックを外します
- 「インターフェースメトリック」に10を入力します
- OKをクリック
優先度の低い接続についても繰り返しますが、今回は「インターフェースメトリック」に20を入力します
これで、優先度の高い接続をデフォルトとして使用します。
それを回避するには、ラップトップのIPアドレスを静的IPに修正します（たとえば、192.168.1.69）。次に、次を使用して、反応するネイティブパッケージャーのIPアドレスをラップトップのIPアドレスに変更する必要があります。
set REACT_NATIVE_PACKAGER_HOSTNAME=192.168.1.69 (Windows)
REACT_NATIVE_PACKAGER_HOSTNAME=192.168.1.69 (Mac & Linux)
プロジェクトを再度開始すると、準備完了です。
まず、未使用のネットワーク接続を無効にします。私の場合、それはVirtualBoxでした。おそらく同じポートを使用しているのでしょう。私はそれについて確信がありません。未使用の接続を無効にした後、パッケージャを再起動します。 npmを使用した場合は、次を入力します
npm start
- IPv4アドレスが見つかりました
- expoアプリを開き、タップして下からボタンを探索します
- exp：// [ipv4adress]：19000を検索バーに書き込みます
- その後、アプリが開きます
windowsで
コマンドプロンプトで
ipconfigを実行しますip4アドレスを取得してコピーします。
行くより
- このPC>プロパティ>高度なシステム設定>環境変数
- 次のシステム変数を追加します：
REACT_NATIVE_PACKAGER_HOSTNAME - 変数の値として、ip4を貼り付ける必要がありました。
npm startを実行します
ネイティブに反応するためにexpoアプリケーションをインストールすることをお勧めします。リンクは 公式ガイドはこちら
npm install -g exp
次に、Genymotionソフトウェアを使用して、実行するアプリのさまざまな環境設定をエミュレートできます。
exp start
ターミナルで「npm start」を使用してネイティブのリアクションを使用する場合、次のようになります。アプリケーションがコンピューターのIpVアドレスを正常に実行すると、ターミナルに表示されるものとExpoアプリ上にあるものが同一であることがわかりました。たとえば、
ipconfig -> IPv4 Address. . . . . . . . . . . : 10.0.0.124
exp://10.0.0.124:19000
この観察に基づいて、次の方法でこの問題を解決しました。
- アプリを実行しているnpmプロンプトスクリプトを閉じます
- Expoアプリを閉じる
ターミナルでコマンドを実行してIPを見つけます：
ipconfigIPを使用してNodeJSコマンドプロンプトでコマンドを実行します（たとえば10.0.0.124）
set REACT_NATIVE_PACKAGER_HOSTNAME=10.0.0.124Expoアプリを起動し、バーコードをスキャンします
npm start解決しない場合は、他の合理的な努力に加えて、React開発者が推奨する次の手順を使用します。
- VirtualBoxでGenymotionをインストールする
- Genymotionサイトでサインアップ
- Genymotionソフトウェアを実行して!!! SignIn
誰かがまだ答えを探している場合に備えて。最初に基本的なことを行い、最初にネットワーク構成を開いてVirtualBox Host-Only Networkを無効にします。これは私のために働いた。
コンテキストで言及されていることはすべて完了しました。接続したWiFiネットワークをパブリックからプライベートに変更しました。これは私のために働いた
開発にgit bashを使用している場合、Icruz4によるこのソリューションが役立ちます
の代わりに
set REACT_NATIVE_PACKAGER_HOSTNAME
つかいます：
export REACT_NATIVE_PACKAGER_HOSTNAME='192.168.1.123'
注意：
走るとき
npm start
Expoは、出力で使用しているIPを示します。そのIPが必要なIPでない場合、
REACT_NATIVE_PACKAGER_HOSTNAME
環境変数が正しく設定されていません
他の回答が示唆するすべてを試してもまだ機能しない場合は、コンピューターと電話が同じWIFIネットワークに接続されていることも確認してください。私にとってこれは1時間の無駄です。
私は答えを探して丸一日を無駄にし、最終的に私は誤って解決策を得た。接続をLANからトンネルに変更するだけ
以下は画像です、
同じ問題が発生しました。問題は、コマンドyarn startまたはnpm startが、最初に有効になったネットワークアダプターを見つけることで、これはたまたま自分（および他の多くのマシン）のVirtualBoxのアダプターです。解決策は次のいずれかです。
rEACT_NATIVE_PACKAGER_HOSTNAME環境変数を手動で設定するか、Windowsのネットワーク接続で未使用のネットワークアダプターを無効にします（画像を参照）問題は、Expoがインターネット接続を提供するアクティブなネットワークアダプターではなく、最初のネットワークアダプターを見つけることです。
私の場合、Expo Androidアプリには「他のアプリの上に描画する "- 許可そして私はそれを与えなかった。だから私はExpoアプリにこの許可を与え、問題は解決した。
この問題は次の方法で解決できる可能性があります。
または
ネットワークアダプターのインターフェイスマトリックスの優先度の割り当て 詳細な指示 here または here .
または
変更を行った後、動作するかどうかをテストする前にコンピューターを再起動してください。
幸運を！
最もシンプルで100％実用的なソリューションの1つは次のとおりです。
- 開発マシンのモバイルホットスポットを有効にします（PCまたはデスクトップ）およびAndroidを接続しますこのホットスポットを持つdevice。
- [コントロールパネル]> [ネットワークとインターネット]> [ネットワーク接続]に移動します。次のように表示されます。 ネットワーク接続設定
- 次に、ローカルエリア接続（あなたのデスクトップホットスポット）のIPアドレスを目的のアドレスに設定します。たとえば、関連する接続を右クリックして192.168.1.69プロパティ->インターネットプロトコルバージョン4(TCP/IPv4)->プロパティをクリックします。次に、この接続の優先度を最高に設定します。これは最もよく説明されています here
次に、コマンドターミナルを開き、次を実行します。
set REACT_NATIVE_PACKAGER_HOSTNAME=192.168.1.69 (Windows) REACT_NATIVE_PACKAGER_HOSTNAME=192.168.1.69 (Mac & Linux)- 次に、expoプロジェクトフォルダーでnpm startを実行してexpoサーバーを再起動し、生成されたファイルをスキャンしてAndroidデバイスでアプリを実行しますexpoアプリでのQRコード。
私は多くの解決策を試しましたが、この方法だけがこの問題を解決するのに役立ちました：
Windowsの場合：
- ウィンドウのコントロールパネルの[ネットワークと接続]に移動します（ネットワークと共有センター>アダプター設定の変更）
- ここに表示されるすべての仮想ボックスを無効にします
- Npmまたはyarnまたはexpoを再起動します...
- デバイスで：expoアプリにログインし、アカウントがない場合はアカウントを作成します。
- あなたのシステムで：ターミナルを開いて、cdコマンドでプロジェクトディレクトリに移動し、
Sudo exp startと入力すると、expoアカウントのログイン詳細が表示されます。 - スキャンするqrコードが表示されます。
Window Firewallでポートを開くだけで、すべてが機能するはずです。
1. [スタート]メニューの[ファイル名を指定して実行]をクリックし、WF.mscと入力して[OK]をクリックします。
セキュリティが強化されたWindowsファイアウォールの左側のウィンドウで、[受信の規則]を右クリックし、操作ウィンドウで[新しい規則]をクリックします。
[ルールの種類]ダイアログボックスで、[ポート]を選択し、[次へ]をクリックします。
[プロトコルとポート]ダイアログボックスで、[TCP]を選択します。 [特定のローカルポート]を選択し、Reactポートのインスタンスのポート番号を入力します（既定のインスタンスの場合は19000など）。次へをクリックします。
[アクション]ダイアログボックスで、[接続を許可する]を選択し、[次へ]をクリックします。
[プロファイル]ダイアログボックスで、データベースエンジンに接続するときのコンピューター接続環境を説明するプロファイルを選択し、[次へ]をクリックします。
[名前]ダイアログボックスで、このルールの名前と説明を入力し、[完了]をクリックします。
同様に、ポート19001も開くことができます。
Windowsでは、
set REACT_NATIVE_PACKAGER_HOSTNAME=my-ip-address
git bashターミナル内で動作しましたが、cmdでは動作しませんでした。 git bashで、npm startを実行した後、ファイアウォールのポップアップが表示されたので、それをクリックして許可をクリックしました。