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

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

Es konnte keine Verbindung zum Entwicklungsserver hergestellt werden

• 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?

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.

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.

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

adb reverse tcp:8081 tcp:8081

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>

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.

** 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**

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

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/

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

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.

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

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

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.

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

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

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!

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.

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

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

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

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

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 :)

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

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.

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

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 deaktivieren

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

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