webentwicklung-frage-antwort-db.com.de

[reag-native] konnte keine Verbindung zum Entwicklungsserver auf Android herstellen

Wenn ich "React-native run-Android" starte, wird ein Fehler angezeigt: "Verbindung zum Entwicklungsserver konnte nicht hergestellt werden ...".

  • Der Paket-Server läuft und ich kann direkt vom Browser aus auf ihn zugreifenin mobiles Gerät.
  • Auf meinem an den Computer angeschlossenen Android-Gerät ist das Debuggen aktiviert.
  • Meine Android-Version ist 4.4.4, daher kann ich den Befehl adb reverse nicht verwenden.
  • Ich habe die IP-Adresse und den Port in der Dev-Einstellung festgelegt.
  • USB-Debugging ist aktiviert.
  • OS ist Windows7.

Wie kann man also den roten Fehler beheben? Jeder Vorschlag wird geschätzt!

Bildbeschreibung hier eingeben

16
cityvoice

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

Methode 2: Verbinden Sie sich über WLAN 

Sie können auch über Wi-Fi eine Verbindung zum Entwicklungsserver herstellen. Du wirst
Zuerst müssen Sie die App mithilfe eines USB-Kabels auf Ihrem Gerät installieren
Sobald dies geschehen ist, können Sie drahtlos debuggen, indem Sie diesen folgen
Anleitung. Sie benötigen die aktuelle IP Ihrer Entwicklungsmaschine
Adresse, bevor Sie fortfahren.

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

  1. Vergewissern Sie sich, 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 werden das beheben. 
  4. Öffnen Sie das In-App-Entwicklermenü. 
  5. Gehen Sie zu Dev-Einstellungen → Debug-Server-Host für Gerät. 
  6. Geben Sie die IP-Adresse Ihres Computers und den Port des lokalen Dev-Servers ein (z. B. 10.0.1.1:8081).
  7. Gehen Sie zurück zum Entwicklermenü und wählen Sie JS neu laden.
29
goldylucks

In meinem Fall lag das Problem bei Android-Sicherheitsrichtlinien. Nach der 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, richtig? Und deshalb kann es nicht. Öffnen Sie zum Aktivieren des Klartextverkehrs Ihren AndroidManifest.xml und fügen Sie Android:usesCleartextTraffic="true" zum <application>-Knoten hinzu.

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.

21
itachi

Ab Android 9.0 (API-Stufe 28) ist die Klartextunterstützung standardmäßig deaktiviert. wir können Android verwenden: usesCleartextTraffic = "true" dies wird funktionieren, aber dies ist keine empfohlene Lösung. Für dauerhafte und empfohlene Lösung ist

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

Step 2 : add this <?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>

Step 3 : Apply the config to your AndroidManifest.xml 
 <application  
      Android:networkSecurityConfig="@xml/network_security_config">
 </application>
9
Tarun konda

Dies gilt für Android 9.0+ gemäß Network Security Configuration . Nachdem ich also alle möglichen Lösungen ausprobiert hatte, die ich im Web gefunden hatte, entschied ich mich, die native Version zu untersuchen Android logcat manuell. Auch nach dem Hinzufügen von Android:usesCleartextTraffic="true", Das habe ich im logcat gefunden:

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 reaktionsfähigen App zu überprüfen. Ich habe festgestellt, dass es in der debug -Variante bereits eine Netzwerksicherheitskonfiguration gibt, die von reaktionsunabhängigen Typen definiert wird und mit der main -Variante in Konflikt steht.

Hier gibt es eine einfache Lösung. Gehe zu <app-src>/Android/app/src/debug/res/xml/react_native_config.xml Fügen Sie eine neue Zeile mit Ihrer eigenen IP-Adresse hinzu:

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

Da die lokale IP meines Computers (siehe ifconfig für Linux) 192.168.29.96 ist, 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 klappt bei dir.

6
Neil Agarwal

Führen Sie das aus und es hat für mich funktioniert

adb reverse tcp:8081 tcp:8081
5
Yoosaf Abdulla

** Ubuntu Führen Sie diese Befehle nur in Ihrem Stammordner aus:

  1. Sudo npm start --- dies wird automatisch angehalten, nachdem die folgende Meldung ausgeführt wurde: - Laden von Diagrammen (fertig) Wenn dies erledigt ist - ein anderes Terminal öffnen

  2. reag-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 dann 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**
3
Shubham Kakkar

wenn Sie versuchen, die App auf Ihrem physischen Android-Gerät über WLAN mit einem Windows-Computer zu debuggen, ist das Gerät möglicherweise nicht in der Lage, auf den Port Ihres PCs oder Laptops zuzugreifen. Sie müssen auf den Port zugreifen. Dies umfasst zwei Schritte:

1.Erstellen Sie zunächst eine Regel in der Firewall. Dazu führen Sie die folgenden Schritte aus:

laufdialogfeld öffnen - Typ wf.msc - Klicken Sie auf eingehende Regeln - Klicken Sie auf Neue Regel auf der rechten Seite - Wählen Sie Port aus dem Popup-Menü aus und klicken Sie auf Weiter und bestimmte lokale Ports, und geben Sie die Portnummer wie 8081 (Standard) ein- Verbindung zulassen __.- Wählen Sie alle im Profilbereich aus

  1. sie müssen Ihren PC für den Außenbereich zugänglich machen. Gehen Sie dazu wie folgt vor: - Netzwerk und Freigabecenter über die Systemsteuerung öffnen - Adaptereinstellungen ändern - Wählen Sie Ihr WLAN-Netzwerk aus - Recht Klicken Sie auf Eigenschaften - Klicken Sie auf die Registerkarte Freigabe - Aktivieren Sie alle Kontrollkästchen

Sie sind gut zu gehen, versuchen Sie jetzt, React-native run-Android auszuführen.

1
vinay gosain

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/Outputs/apk und, falls vorhanden, die Deinstallation von Android installiert und folgende Befehle vom Stammordner aus ausführen)

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
0
Royal.O

Ich habe das gleiche Problem und löse es, indem ich das "Knotenmodul" -Paket lösche und dann wieder Garn einlege. Nur bei einigen Änderungen müssen wir unsere Änderungen löschen 

0
Gagan Saini

Diese Frage habe ich auch in nativen und reaktionsnativen Profis getroffen. Meine Lösung lautete: 1 offener npm-Server mit "npm start" 2 natives Projekt mit Android Studio ausführen 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. P.S. Wenn Sie ein fehlgeschlagenes Projekt ausgeführt haben, führen Sie einfach "adb kill-server" aus.

0
Michael Tangs

Um die Antwort von goldylucks hinzuzufügen, 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

Dort sehen Sie Ihre IP-Adresse, etwa: 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önnen Sie den Port 8081 in Ihrer Firewall öffnen.

Sudo ufw allow 8081

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

Dann können Sie der Antwort von goldylucks folgen und auf Dev settings gehen und 192.168.0.10:8081 oder die gewünschte IP-Adresse eingeben.

Sie können es über den Browser Ihres Geräts testen. Navigieren Sie bei laufendem Packager von Ihrem PC zu http://192.168.0.10:8081 von Ihrem mobilen Gerät und stellen Sie sicher, dass es funktioniert. Es wird etwas wie "Packager running" angezeigt. Es wird eindeutig funktionieren oder versagen.

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

Daher sollten Sie wahrscheinlich WLAN als Teil Ihrer Entwicklungsstrategie verwenden.

0
agm1984

und vor allem danke ich Ihnen dafür, dass Sie Ihre Zweifel veröffentlicht haben. Das liegt vor allem daran, dass Ihre Expo oder die App, in der Sie Ihr reaktives Projekt ausführen, möglicherweise nicht im selben lokalen WLAN oder LAN liegen Es besteht die Möglichkeit, dass in Ihrer Verbindung häufig Störungen auftreten, aufgrund derer sie ihre Konnektivität verlieren.

Auch ich stehe vor diesem Problem und ich persönlich lösche den Cache und starte den Neustart dann wieder perfekt. Ich hoffe, das funktioniert auch für Sie!

0
Rishav Kumar

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

0
Mahdi Farhani

Für mich habe ich ein Paket deinstalliert, das ich kürzlich installiert habe und das Projekt lief wieder auf meinem physischen Gerät mit dem folgenden Befehl "npm uninstall recentPackageName" Ich hoffe, das hilft :)

0
user11581745

Dies ist höchstwahrscheinlich ein Firewall-Problem. Wenn jemand, der Ubuntu verwendet, dieses Problem hat, können Sie verwenden 

Sudo service iptables stop

um die Firewall zu deaktivieren, damit der Port erreichbar ist

0

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

0