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

2016-05-22 react-native

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

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

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

Answers

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

これは、以前のパッケージャー/エミュレーターのインスタンスにアタッチされたChromeデバッガーを開いたまま、反応ネイティブパッケージャーを再起動したために起こったようです。

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

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

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

これは私には有効ですが、非常に面倒で時間がかかります。私は誰かがより良い方法を持っていることを望みます。

リモートデバッグを行うには、両方のデバイスを同じwifi(ネットワーク)に接続する必要があります。

ルーターに問題がある可能性があります。 iPhoneホットスポットを介してwifiに接続してみてください。

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でプロジェクトを開きます。
  • [製品]-> [スキーム]-> [EditScheme]-> [実行]に移動します。
  • 環境変数[ +署名]をクリックします。
  • disableフラグ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追加しました

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

問題は、実際のデバイスが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ウィンドウをチェックすることを忘れないでください。これは「別のデバッガ」である可能性があります。

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

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

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

ここに私が読んだことがなく、数時間かかる参考文献があります:

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

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

Related