Es konnte keine Verbindung zum React Native-Entwicklungsserver unter Android hergestellt werden

78

Beim Ausführen react-native run-androidwird der folgende Fehler angezeigt:

Es konnte keine Verbindung zum Entwicklungsserver hergestellt werden

Fehlerbildschirm

  • Der Paketserver wird ausgeführt und ich kann direkt über den Browser auf meinem Mobilgerät darauf zugreifen.
  • Mein Android-Gerät ist mit dem Computer verbunden und hat das Debuggen aktiviert (ich habe es mit dem adb devicesBefehl überprüft ).
  • Meine Android-Version ist 4.4.4, daher kann ich keinen adb reverseBefehl verwenden.
  • Ich habe die ID-Adresse und den Port in der Dev-Einstellung festgelegt.
  • USB-Debug ist aktiviert.
  • Ich benutze Windows 7.

Wie behebe ich diesen Fehler?

Stadtstimme
quelle
Hast du dir stackoverflow.com/questions/38835931/… angesehen ? Er läuft adb reversemit Android 4.4.2
Goldylucks
1
aber Sie müssen möglicherweise mit facebook.github.io/react-native/docs/…
Goldylucks
Führen Sie npm start auf dem lokalen Computer aus, um den Entwicklungsserver zu starten. Ich habe das gleiche Problem und es funktionierte für mich wie Magie
Ashraful
Da native Änderungen so oft reagieren, wäre es vorteilhaft, auch die native Version zu reagieren. Scheint, als ob das Problem bei weniger als 0,59
auftritt

Antworten:

78

Aus den Dokumenten: http://facebook.github.io/react-native/docs/running-on-device.html#method-2-connect-via-wi-fi

Methode 2: Verbindung über WLAN herstellen

Sie können auch über WLAN eine Verbindung zum Entwicklungsserver herstellen. Sie
müssen die App zunächst mit einem USB-Kabel auf Ihrem Gerät installieren. Anschließend
können Sie das Debuggen drahtlos durchführen, indem Sie diese
Anweisungen befolgen. Sie benötigen die aktuelle IP-
Adresse Ihres Entwicklungscomputers, bevor Sie fortfahren können.

Öffnen Sie ein Terminal und geben Sie / sbin / ifconfig ein, um die IP-Adresse Ihres Computers zu ermitteln.

  1. Stellen Sie sicher, dass sich Ihr Laptop und Ihr Telefon im selben Wi-Fi-Netzwerk befinden.
  2. Öffnen Sie Ihre React Native-App auf Ihrem Gerät.
  3. Sie sehen einen roten Bildschirm mit einem Fehler . Das ist in Ordnung . Die folgenden Schritte beheben das Problem.
  4. Öffnen Sie das In-App-Entwicklermenü.
  5. Gehen Sie zu Dev Settings → Debug Server Host für Gerät.
  6. Geben Sie die IP-Adresse Ihres Computers und den Port des lokalen Entwicklungsservers ein (z. B. 10.0.1.1:8081).
  7. Gehen Sie zurück zum Entwicklermenü und wählen Sie JS neu laden.
Goldylucks
quelle
Ja, ich verwende Wi-Fi und das mobile Gerät und der Computer befinden sich im selben WIFI-Netzwerk.
Cityvoice
Hast du diese Befehle befolgt? Gibt es eine Chance, eine schnelle Bildschirmabdeckung zu erstellen und als GIF-Datei hochzuladen?
Goldylucks
ok man ich versuche nur zu helfen ... kannst du versuchen ein neues projekt mit zu starten react-native init myProjectund sehen ob du dich verbinden kannst? So können wir die Möglichkeit ausschließen, dass das Problem in Ihrem Code enthalten ist.
Goldylucks
Wenn Sie in Zukunft mit einem neuen Framework / Tool arbeiten, überprüfen Sie immer die Neuinstallation, wenn Sie auf ein Problem stoßen. Hilft Ihnen, das Problem schneller zu finden UND spart anderen Menschen Zeit.
Viel
13
@xerotolerant - Sie können adb shell input keyevent 82auf Ihre Eingabeaufforderung klicken , um das Entwicklermenü zu öffnen.
Saumik Bhattacharya
115

In meinem Fall lag das Problem bei den Sicherheitsrichtlinien für Android. Laut Dokumentation :

Ab Android 9.0 (API-Level 28) ist die Klartextunterstützung standardmäßig deaktiviert.

Aber die Anwendung versucht, über HTTP auf Metro Bundler zuzugreifen, oder? Und deshalb kann es nicht. Öffnen Sie Ihren Knoten AndroidManifest.xmlund fügen Sie ihn android:usesCleartextTraffic="true"zum <application>Knoten hinzu , um den Klartextverkehr zu aktivieren .

Zum Beispiel:

<application
    android:name="com.example.app"
    android:allowBackup="false"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:theme="@style/AppTheme"
    android:usesCleartextTraffic="true">

Weitere Lösungen finden Sie in dieser SO: https://stackoverflow.com/a/50834600/1673320 . Das Problem von OP ist anders, aber ähnlich.

itachi
quelle
7
Es ist besser, es nur für das Debuggen anzuwenden. Referenz: stackoverflow.com/a/55147267/1489446
Erick M. Sprengel
Wenn dies nicht funktioniert, schauen Sie bitte unter stackoverflow.com/a/56744301/6740333 nach, da für neue native Versionen eine vordefinierte Konfiguration vorliegt
Neil Agarwal,
@ ErickM.Sprengel Sie haben erwähnt, dass dies nur für das Debuggen angewendet werden sollte. Kann es Probleme geben, wenn dies nur für das Hauptmanifest gilt localhost?
Divyanshu Maithani
Es werden http-Anfragen im Klartext zugelassen, die unsicher sind. Wenn Sie sich dessen bewusst sind, gibt es meines Erachtens kein Problem. Ich bin nicht sicher, ob einige SDKS die NetworkSecurityPolicy.isCleartextTrafficPermitted () überprüfen, aber ich denke, dass dies kein Problem ist.
Erick M. Sprengel
Dies funktionierte für mich auf Xiaomi Redmi Note 6 Pro neuesten Android-Update auf das Datum.
Rinor Dreshaj
43

Führen Sie dies aus und es hat bei mir funktioniert

adb reverse tcp:8081 tcp:8081
Yoosaf Abdulla
quelle
2
Aus OP: "Meine Android-Version ist 4.4.4, daher kann ich den Befehl adb reverse nicht verwenden."
Xaphod
Wenn für Android adb reverse nicht geholfen hat, gehen Sie vorher zu Einstellungen / Entwickleroptionen / USB-Debugging-Berechtigungen widerrufen. Dann machen Sie adb umgekehrt. Dies half mir, es endlich per Kabel anstatt über WLAN laufen zu lassen.
Dmitri Volkov
Mein Emulator war verbunden, obwohl er nicht mit dem Bundler verbunden wurde ... dieser Befehl funktionierte für mich
Samiksha Jagtap
26

Ab Android 9.0 (API-Level 28) ist die Klartextunterstützung standardmäßig deaktiviert. wir können android verwenden: usedCleartextTraffic = "true" dies wird funktionieren, aber dies ist keine empfohlene Lösung. Die dauerhafte und empfohlene Lösung finden Sie unten:

Schritt 1: Erstellen Sie eine Datei im Android-Ordner app/src/debug/res/xml/network_security_config.xml

Schritt 2: Fügen Sie dies hinzu network_security_config.xml

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
  <!-- deny cleartext traffic for React Native packager ips in release -->
  <domain-config cleartextTrafficPermitted="true">
   <domain includeSubdomains="true">localhost</domain>
   <domain includeSubdomains="true">10.0.2.2</domain>
   <domain includeSubdomains="true">10.0.3.2</domain>
  </domain-config>
</network-security-config>

Schritt 3: Wenden Sie die Konfiguration auf Ihre AndroidManifest.xml an

<application
 android:networkSecurityConfig="@xml/network_security_config">
</application>
Tarun konda
quelle
12

Dies gilt für Android 9.0+ gemäß der Netzwerksicherheitskonfiguration . Nachdem ich alle möglichen Lösungen ausprobiert hatte, die ich im Web gefunden hatte, beschloss ich, den nativen Android-Logcat manuell zu untersuchen. Auch nach dem Hinzufügen android:usesCleartextTraffic="true"fand ich dies in der Logcat:

06-25 02:32:34.561 32001 32001 E unknown:ReactNative: Caused by: java.net.UnknownServiceException: CLEARTEXT communication to 192.168.29.96 not permitted by network security policy

Also habe ich versucht, die Quelle meiner reaktionsnativen App zu überprüfen. Ich fand, dass es in der debugVariante bereits eine Netzwerksicherheitskonfiguration gibt, die von reaktionsnativen Leuten definiert wird und mit der in Konflikt stehtmain Variante in .

Hierfür gibt es eine einfache Lösung. Gehen Sie zu <app-src>/android/app/src/debug/res/xml/react_native_config.xml Hinzufügen einer neuen Zeile mit Ihrer eigenen IP-Adresse wie folgt:

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
  <domain-config cleartextTrafficPermitted="true">
    <domain includeSubdomains="false">localhost</domain>
    <domain includeSubdomains="false">10.0.2.2</domain>
    <domain includeSubdomains="false">10.0.3.2</domain>
    ***<domain includeSubdomains="false">192.168.29.96</domain>***
  </domain-config>
</network-security-config>

Als lokale IP meines Computers (überprüfen von ifconfig auf Linux ) 192.168.29.96 lautet, habe ich die obige Zeile in *** hinzugefügt

Dann müssen Sie für Android bereinigen und neu erstellen!

cd <app-src>/android
./gradlew clean
cd <app-src>
react-native run-android

Ich hoffe das funktioniert bei dir.

Neil Agarwal
quelle
1
Ich habe heute 3 Stunden damit verbracht herauszufinden, warum mein iOS-Mobilteil über USB und Android nicht funktioniert hat, obwohl der Android-Browser das Bundle über die IP: Port-Adresse abrufen konnte. Dies war die Lösung. Riesige Hilfe!
Artif3x
5

** Ubuntu Versuchen Sie, diese Befehle nur in Ihrem Stammordner auszuführen:

  1. sudo npm start --- dies wird automatisch angehalten, nachdem gesagt wurde - Laden von Grafiken, fertig (so ähnlich); Wenn dies erledigt ist, öffnen Sie ein anderes Terminal

  2. React-Native Run-Android


Wenn das Problem weiterhin besteht, löschen Sie Ihren Build-Ordner in android / ios. Führen Sie diesen Befehl aus und führen Sie die oben genannten Befehle in derselben Reihenfolge aus

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res && react-native run-android**
Shubham Kakkar
quelle
3

Meine Lösung ist, AndroidManifest.xml in android / app / src / debug zu ändern oder neu zu erstellen:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

    <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" />
</manifest>

Ich verwende React Native Version: 0.61.5

Daniel Le
quelle
3

Der Standard-Metro-Builder wird auf Port 8081 ausgeführt. Auf meinem PC ist dieser Port jedoch bereits von einem anderen Prozess (McAfee Antivirus) belegt. Daher habe ich den Standard-Port des Metro-Builders mit dem folgenden Befehl in Portnummer 8088 geändert

react-native run-android start --port=8088

Dies hat mein Problem behoben und die App funktioniert jetzt einwandfrei.

PS: Mit der App "Resource Monitor" können Sie überprüfen, ob ein Port in Windows belegt ist oder nicht. (Unter "Listening Ports" auf der Registerkarte "Netzwerk"). Weitere Informationen finden Sie unter diesem Link: https://www.paddingleft.com/2018/05/03/Find-process-listening-port-on-Windows/

Krishna Sailesh
quelle
1

Ich habe diese Frage auch in Native und React-Native Pro getroffen. Meine Lösung war:

  1. öffne npm server mit npm start
  2. Führen Sie ein natives Projekt mit Android Studio aus
  3. Übertragungsnetzanforderung mit adb reverse tcp:8081 tcp:8081
  4. Wenn Sie die Seite neu laden müssen, geben Sie einfach Folgendes ein: adb shell input keyevent 82

halte es einfach in Ordnung.

PS: Wenn Sie ein Fehlerprojekt ausgeführt haben, führen Sie es einfach aus adb kill-server

Michael Tangs
quelle
1

Wenn Sie versuchen, die App auf Ihrem physischen Android-Gerät über WLAN mit einem Windows-Computer zu debuggen, kann das Gerät möglicherweise nicht auf den Anschluss Ihres PCs oder Laptops zugreifen. Sie müssen den Anschluss zugänglich machen. Dies umfasst zwei Schritte:

  1. Erstellen Sie zuerst eine Regel in der Firewall. Befolgen Sie dazu die folgenden Schritte:

    • Öffnungsdialog öffnen
    • Art wf.msc
    • Klicken Sie auf eingehende Regeln
    • Klicken Sie auf der rechten Seite auf Neue Regel
    • Wählen Sie den Port aus dem Einblendmenü und klicken Sie auf "Weiter"
    • Wählen Sie den TCP-Port und bestimmte lokale Ports aus und geben Sie die Portnummer wie folgt ein 8081 (Standard) ein.
    • Erlaube die Verbindung
    • Wählen Sie alle im Profilbereich aus
    • Geben Sie einen geeigneten Namen und eine Beschreibung an
    • Klicken Sie auf Fertig stellen
  2. Sie müssen Ihren PC nach außen zugänglich machen. Führen Sie dazu die folgenden Schritte aus:

    • Öffnen Sie das Netzwerk und das Freigabecenter über das Bedienfeld
    • Adapter Einstellungen ändern
    • Wählen Sie Ihr WLAN-Netzwerk
    • Rechtsklick, Eigenschaften
    • Klicken Sie auf die Registerkarte Freigabe
    • Aktivieren Sie alle Kontrollkästchen

Sie können loslegen und versuchen, jetzt React-Native Run-Android auszuführen.

Vinay Gosain
quelle
1

Am einfachsten für MAC. Holen Sie sich die IP-Adresse Ihres WLAN-Netzwerks über ipconfig getifaddr en0. Dann schreiben Sie, dass die IP zu Ihrem DEV settings -> Debug server host & port for deviceZusatz :8081 Beispiel. 192.21.22.143:8081. Dann neu laden. Das ist es

Nagibaba
quelle
Wo sind deine Dev-Einstellungen?
Harry Moreno
Schütteln Sie das Gerät oder wenn Sie einen cmd+D
Apfelsimulator
Schütteln Sie das iPhone -> '
Bundler
1

Ich habe hinzugefügt <uses-permission android:name="android.permission.INTERNET" />zu debug/AndroidManifest.xmlund es begann zu arbeiten! Ich habe es entferntmain/AndroidManifest.xml und vergessen, Debug hinzuzufügen.

Die ReactNative-Version ist 0.61.2

Denys Klymenko
quelle
Ich habe keine debug / AndroidManifest.xml-Datei. Sollte sie hinzugefügt werden?
Harry Moreno
@ HarryMoreno Es wurde automatisch erstellt und gespeichert unter/android/app/src/debug/AndroidManifest.xml
Denys Klymenko
1

Keine der oben genannten Lösungen hat bei mir funktioniert.

Ich habe gerade das Dev-Menü geöffnet, indem ich auf geklickt Ctrl+Mund dann auf geklickt change bundle locationund meine Computer-IP gefolgt von Port hinzugefügt habe.

Julia Williams
quelle
1

Lösung für React-native >V0.60

Sie können auch über WLAN eine Verbindung zum Entwicklungsserver herstellen. Sie müssen die App zunächst mit einem USB-Kabel auf Ihrem Gerät installieren. Anschließend können Sie das drahtlose Debuggen anhand dieser Anweisungen durchführen. Sie benötigen die aktuelle IP-Adresse Ihres Entwicklungscomputers, bevor Sie fortfahren können.

Öffnen Sie ein Terminal und geben Sie ipconfig getifaddr en0For MAC ein

Stellen Sie sicher, dass sich Ihr Laptop und Ihr Telefon im selben Wi-Fi-Netzwerk befinden. Öffnen Sie Ihre React Native-App auf Ihrem Gerät.

Sie sehen einen roten Bildschirm mit einem Fehler. Das ist in Ordnung. Die folgenden Schritte beheben das Problem.

  1. Öffnen Sie das In-App-Entwicklermenü. Schütteln Sie Ihr Telefon oder drücken SieCMD/ctrl + M
  2. Klicken Sie auf Einstellungen
  3. Klicken Sie auf Debug Server Host & Port für Gerät
  4. Im Popup Geben Sie die IP-Adresse Ihres Computers und den Port des lokalen Entwicklungsservers ein (z. B. 10.0.1.1:8081).
  5. Gehen Sie zurück zum Entwicklermenü und wählen Sie Neu laden.

ERLEDIGT

Harter Patel
quelle
0

Dies ist höchstwahrscheinlich ein Firewall-Problem. Wenn jemand, der Ubuntu verwendet, mit diesem Problem konfrontiert ist, können Sie es verwenden

sudo service iptables stop

um die Firewall zu deaktivieren, damit auf den Port zugegriffen werden kann

Mayank Chaurasia
quelle
0

und zuallererst schätze ich Sie für Ihre Zweifel. Dies liegt hauptsächlich daran, dass sich Ihre Ausstellung oder die App, in der Sie Ihr reaktives natives Projekt ausführen, möglicherweise nicht im selben lokal verbundenen WLAN oder LAN befindet. Es besteht auch die Möglichkeit, dass Ihre Verbindung häufig gestört wird, wodurch die Konnektivität verloren geht.

Auch ich bin mit diesem Problem konfrontiert und lösche persönlich den Cache und starte dann erneut, und der Boom startet perfekt neu. Ich hoffe das funktioniert auch bei dir!

Rishav Kumar
quelle
0

Hinzufügen zu goldylucks Antwort , können Sie IP 192.168.0.10 verwenden, wenn dies die IP Ihres PCs ist, auf dem der React Native-Packager ausgeführt wird.

Möglicherweise müssen Sie auch Ihre Firewall öffnen.

In Ubuntu 18.04 können Sie Ihre IP erhalten durch:

ip -c addr show

Sie werden dort Ihre IP sehen, so etwas wie: inet 192.168.0.10/24 brd 192.168.0.255 scope global dynamic noprefixroute enp0s25 (Beachten Sie die 192.168.0.10 in meinem Beispiel).

Dann könnten Sie Port 8081 in Ihrer Firewall öffnen, etwa:

sudo ufw allow 8081

Es wird TCP verwendet, stellen Sie also sicher, dass TCP an Port 8081 geöffnet ist.

Dann können Sie der Antwort von Goldylucks folgen Dev settingsund gehen und eintreten192.168.0.10:8081 oder welche IP Sie auch immer benötigen.

Sie können es über den Browser auf Ihrem Gerät testen. Navigieren Sie zu, während der Packager von Ihrem PC aus ausgeführt wirdhttp://192.168.0.10:8081 von Ihrem mobilen Gerät zu und stellen Sie sicher, dass er funktioniert. Es wird so etwas wie "Packager läuft" angezeigt. Es wird eindeutig funktionieren oder versagen.

Die Antwort von Goldylock reizt mich, weil sie das Problem sehr gut löst, wenn Sie Probleme mit diesen Fehlermeldungen haben. Es ist schade, die App ständig oder noch schlimmer neu erstellen zu müssen, die APK von Ihrem Gerät zu löschen und dann erneut zu erstellen.

Daher sollten Sie wahrscheinlich WLAN als Teil Ihrer Entwicklungsstrategie verwenden.

agm1984
quelle
0

In meinem Fall mit Android 4.4.2 mussten einige zusätzliche Schritte ausgeführt werden: (Stellen Sie sicher, dass auf dem rn-Server npm start ausgeführt wird, löschen Sie app-debug.apk von android / app / build / output / apk und deinstallieren Sie es von android, falls es zuvor installiert und ausgeführt wurde folgende Befehle aus dem Stammordner)

1_ create dir mkdir android/app/src/main/assets
2_ create file index.android.js which is a clone of index.js cp index.js index.android.js
3_ react-native link
4_ curl "http://localhost:8081/index.android.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"
5_ react-native run-android
Royal.O
quelle
0

In meinem Fall hat mein Emulator eine Proxy-Einstellung, nach dem Ausschalten funktioniert alles einwandfrei.

Mahdi Farhani
quelle
1
Wie schalte ich es aus?
Vikas Satpute
@VikasSatpute Welchen Emulator benutzt du?
Mahdi Farhani
Android Emulator - Pixel 3 Xl API: 28: 5554
Vikas Satpute
0

Grundsätzlich tritt dieser Fehler auf, wenn der npm-Server nicht gestartet wird.

Überprüfen Sie also zuerst den Status des npm-Servers. Wenn er nicht ausgeführt wird, starten Sie npm mit dem Befehl npm startund Sie können im Terminal sehen:

Laden des Abhängigkeitsgraphen abgeschlossen.

Jetzt wird npm gestartet und Ihre App mit Befehl in einem anderen Terminal ausgeführt

react-native run-android
Sarojini2064130
quelle
0

Stellen Sie sicher, dass der NPM-Server ausgeführt wird . Andernfalls führen Sie es erneut aus. Es wird das Problem lösen.

Abhishek Sengupta
quelle
0

Für mich habe ich ein Paket deinstalliert, das ich kürzlich installiert habe, und das Projekt wurde erneut auf meinem physischen Gerät mit dem folgenden Befehl "npm deinstalliere den letzten Paketnamen" ausgeführt. Ich hoffe, das hilft :)

user8572385
quelle
0

Als ich ein neues Projekt gestartet habe

react-native init MyPrroject

Ich bin could not connect to development serverauf beide Plattformen gekommen iOSund Android.

Meine Lösung ist zu

sudo lsof -i :8081
//find a PID of node
kill -9 <node_PID>

Stellen Sie außerdem sicher, dass Sie Ihre lokale IP-Adresse verwenden

ipconfig getifaddr en0
yoAlex5
quelle
0

Ich habe das gleiche Problem und löse es, indem ich das node modulePaket lösche und dann das Garn erneut installiere. Einfach bei einigen Änderungen müssen wir unsere löschen.

Gagan Saini
quelle
0

In meinem Fall musste ich auf einem Macbook meine Firewall ausschalten, um eingehende Verbindungen von meinem Android zuzulassen. RN v0.61.5

Jim
quelle
0

Für mich alles wie oben erwähnt getan, es funktionierte immer noch nicht, dann folgte ich den folgenden Schritten und arbeitete wie Charme

Gehe zu Fenstersicherheit => Firewall und Netzwerkschutz auswählen => Privates Netzwerk deaktivierenGeben Sie hier die Bildbeschreibung ein

Rajesh Nasit
quelle
0

Das Problem mit dem Android X-Gerät wurde gefunden.

Für Android API 28 und höher

In network_security_config.xml mit cleartextTrafficPermitted = "true"

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
  <domain-config cleartextTrafficPermitted="true">
    ....
  </domain-config>
</network-security-config>

Laden Sie dann JS neu

Amit
quelle
-2

Wir waren mit diesem Problem konfrontiert. Um dies zu beheben, ist die Lösung unten ganz einfach.

  1. Brechen Sie den aktuellen Prozess von "React-Native Run-Android" mit STRG + C oder CMD + C ab
  2. Schließen Sie die Befehlszeile des Metro Bundler-Fensters, die automatisch geöffnet wird.
  3. Führen Sie den Befehl "React-Native Run-Android" erneut aus.

Grundsätzlich weist dieser Fehler darauf hin, dass Ihr aktueller Build aufgrund von Gründen wie Codeproblemen oder Abhängigkeitsproblemen fehlgeschlagen ist.

Klicken Sie hier für weitere Details

Venkat.R
quelle