React-Native Error:http:// localhost:8081 / debugger-proxy?role = clientへの接続がタイムアウトしました

2016-05-22 react-native

これを表示する前に、 react-native run-iosコマンドと私のアプリショーを3秒間react-native run-iosます。 iOSシミュレータで実行しています

ここに画像の説明を入力してください

ExceptionsManager.js:76接続先 http:// localhost:8081 / debugger-proxy?role = client timed out。あなたは ノードプロキシを実行していますか?デバイスで実行している場合は、 RCTWebSocketExecutor.m正しいIPアドレスをRCTWebSocketExecutor.mます。

Answers

iOSのホーム画面のシミュレーターでプロジェクトアプリを削除することで、新しいプロジェクトを作成せずに、なんとかしてそれを機能させました。現在は正常に動作しています。

以前のパッケージャー/エミュレーターインスタンスに接続されたChromeデバッガーを開いたまま、react-nativeパッケージャーを再起動したため、これは私に起こっていたようです。

デバッガーのChromeタブを強制終了してrun-ios再試行すると、再起動やその他の問題なしに、問題が解決したようです。

この問題は頻繁に発生します。通常、リモートデバッガーをオンにして開発しているときに、コードブレーキングのようなエラーを保存します。

リロードしてみてください...それでも直らない場合: crlt + cmd + z。次にリモートデバッグを停止してから更新します。これで問題は解決しますが、デバッガーを紛失しました。もう一度行きます... crlt + cmd + z。今回はリモートデバッグを開始してから、再度更新します。プロジェクトは正常に戻ったはずです。

これは私にとってはうまくいきますが、とても面倒で時間がかかります。私は誰かがより良い方法を持っていることを望みます。

リモートデバッグの場合、両方のデバイスが同じwifi(ネットワーク)に接続されている必要があります。

ルーターに問題がある可能性があります。 iPhoneのホットスポットからWi-Fiに接続してみてください。

githubで回避策、MacとiPhoneでこのエラーを解決するようにDNSを設定する方法を見つけました:

  1. あなたの開発マシンでは、システム設定->ネットワーク-> Wi-Fi-> adcanced-> nameOfYourNetwork
  2. [DNS]タブで、IPを8.8.8.8に変更します
  3. iPhoneで同じDNS変更を行う

これは私にも起こりました。どういうわけかリブートで修正しました...ポート8081がすでに別のプロセスで使用されているため、Metro Bundlerを起動できなかったと思います。再起動後、 react-native run-ios再度react-native run-iosし、今度はシミュレーターがエラーなしで適切に起動しました。

ちなみに、これはまったく新しいプロジェクトで起こっていました。

私の場合、電話とは別のネットワークに接続していました。 SIMカードは必要ありません。同じネットワークにいることを確認するだけで済みました(ここには仕事用ネットワークとゲストネットワークがあります)。チェックアウトできるRNのドキュメントにいくつかの注意事項があります(途中で、私たちが直面しているプロキシの問題を示すピンク色のボックスがあります)。

http://facebook.github.io/react-native/docs/running-on-device.html

iOSでも同じ問題が発生していました。

以下のトリックは私のために働きました:

  • Xcodeでプロジェクトを開きます。
  • Product-> Scheme-> EditScheme-> Runに移動します。
  • 環境変数[ +記号]をクリックします。
  • disable OS_ACTIVITY_MODEしたフラグOS_ACTIVITY_MODEを追加します。
  • Xcodeからアプリを実行します(この閉じる前のパッケージャー。)

これが誰かを助けることを願っています。

リリースビルド後にjsbundleの代わりにインデックスファイルを使用するように切り替えるのを忘れたときに、このエラーが発生しました。

持っていた

jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

の代わりに

jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

インデックスファイルに切り替えて、再度ビルドすると動作しました。

私はたくさん試して、最後にNSAllowsArbitraryLoadsをinfo.plistに追加してNSAllowsArbitraryLoadsしました。

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
    <key>NSExceptionDomains</key>
    <dict>
        <key>localhost</key>
        <dict>
            <key>NSExceptionAllowsInsecureHTTPLoads</key>
            <true/>
        </dict>
    </dict>
</dict>

ネットワークと同じですが、同じエラーが発生しました。

デバイスからアプリを削除して、再度ビルドします。動作します。

「バンドル反応ネイティブコードと画像」ビルドフェーズタブのメインターゲットにスクリプトを追加することを修正しました。 export DISABLE_XIP=NOTHANKS追加しただけexport DISABLE_XIP=NOTHANKS

ここに画像の説明を入力してください

問題は、実際のデバイスがxip.ioドメイン下の私のIPに接続しようとしたことでした。

xCodeプロジェクトにカスタム画像アセットを追加するときにこのスクリプトが必要だと思いますが、レポートナビゲータータブでIPのURLが間違っていることを確認できます。 ここに画像の説明を入力してください

私のセットアップ react: 16.3.1, react-native-cli: 2.0.1 react-native: 0.55.4 xCode 9.4.1 react: 16.3.1, react-native-cli: 2.0.1 react-native: 0.55.4 xCode 9.4.1 react: 16.3.1, react-native-cli: 2.0.1 react-native: 0.55.4 xCode 9.4.1 react: 16.3.1, react-native-cli: 2.0.1 react-native: 0.55.4 xCode 9.4.1

ここでは、xip.ioに関する元の反応ネイティブドキュメント(トラブルシューティングの章) https://facebook.github.io/react-native/docs/running-on-device

ここでXIPを無効にする可能性があります。 https://github.com/facebook/metro/commit/079dcaed990abb6754c03113362e4f537cd32a24

ここで私がこの解決策を試すために見つけたヒント https://github.com/facebook/react-native/issues/12786

#if DEBUG
jsCodeLocation = [NSURL URLWithString:@"http://192.168.11.21:8081/index.bundle?platform=ios&dev=true"];
#else
#warning "PRODUCTION DEVICE"
  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#endif

あなたはこのリンクからあなたのIPアドレスを見つけることができます https://kb.wisc.edu/page.php?id=6526

私にとって、これは実際のデバイスをデバッグしようとしたときに起こりました。問題は、私のコンピューターと実際のデバイスが同じWiFiに接続されていないことでした。

私にとってこれはうまくいきます:

  • リモートjsデバッグを停止します。
  • ブラウザのリモートjsデバッガページを閉じます。
  • React Native Debuggerを実行します。
  • ctrl+tを押し、 React Native pakager portと入力して確認します。
  • シミュレータでctrl+Mを押し、アクティブなリモートjsデバッグを実行します。

行ってよかった!

あなたが取得する場合:

別のデバッガがすでに接続されています

ばかげているように見えるかもしれませんが、バックグラウンドでChromeウィンドウを確認することを忘れないでください。

「Start JS Debugging」をタップすると、React Nativeがデバッガーで新しいChromeウィンドウを開きます。 Mac OS Xで複数のChromeウィンドウ(タブではない)を開いている場合、複数のウィンドウがあることを示す視覚的な表示はないため、「別のデバッガーがすでに接続されています」という前面のウィンドウが表示されている可能性があります。他のデバッガがバックグラウンドのChromeウィンドウであることを認識しないでください。

これは私がキャプティブポータル (インターネットに接続する前にいくつかの情報を入力する必要があるポップアップウィンドウ)を備えたWiFiネットワーク経由で接続していたために起こりました。

キャプティブポータルのないWiFiネットワーク経由で接続していることを確認してください。 あなたの電話のあなたの個人的なホットスポットでさえ、トリックをします!

これは私が読んだことがなく、数時間かかった参照です:

問題がある場合は、Macとデバイスが同じネットワーク上にあり、互いに到達できることを確認してください。キャプティブポータルを備えた多くのオープンワイヤレスネットワークは、デバイスがネットワーク上の他のデバイスに到達しないように構成されています。この場合、デバイスのパーソナルホットスポット機能を使用できます。

https://facebook.github.io/react-native/docs/running-on-device#troubleshooting

私にとって、上記の解決策はどれも機能していないようです。接続の強制終了、バンドルのリロード、npm startの停止と実行を再度試みましたが、成功しませんでした。 最終的に私のために働いたのは、それを再開する前にnpmキャッシュをクリアすることでした:

npm start --clear-cache

この後、バンドルをリロードすると、デバッガーが適切に接続されました。

シミュレータまたは実際のデバイスからアプリを削除し、プロジェクトを再構築します。これでうまくいきました。

Macで作業しています。
「インターネット共有」を有効にすることで解決しました。
-[設定]-> [共有]に移動します
-「USB 10/100/1000 LAN」からの接続を共有する
-コンピュータを使用する場合:「Wi-fi」
-「インターネット共有」をチェック->ネットワークを作成
-iPhoneで新しいネットワークに接続します
-メトロとxcodeをリロード

これは私にも起こりました。シミュレータ用に実際の電話で開発しています。私は実際の電話を振る必要があり、リモートデバッグオプションを押すと、アクティブなデバッガーを備えたブラウザーに新しいhttp:// localhost:19001 / debugger-ui /ページが読み込まれました。

Related