it-swarm.com.de

Android konnte das JS-Bundle nicht laden

Ich versuche, AwesomeProject auf meinem Nexus5 (Android 5.1.1) auszuführen.

Ich kann das Projekt erstellen und auf dem Gerät installieren. Aber wenn ich es starte, wird mir ein roter Bildschirm angezeigt

JS-Bundle kann nicht heruntergeladen werden. Haben Sie vergessen, den Entwicklungsserver zu starten oder Ihr Gerät anzuschließen?

Im nativen iOS kann ich jsbundle offline laden. Wie kann ich dasselbe für Android tun? (Oder zumindest, wo kann ich die Serveradresse konfigurieren?)

Aktualisieren

Führen Sie zum Ausführen mit einem lokalen Server die folgenden Befehle in Ihrem reaktionsnativen Projektstammverzeichnis aus

  1. react-native start > /dev/null 2>&1 &
  2. adb reverse tcp:8081 tcp:8081

bitte werfen Sie einen Blick auf die Antwort von dsissitka, um weitere Einzelheiten zu erfahren.

Um ohne Server zu laufen, bündle die js-Datei in das apk, indem du Folgendes ausführst:

  1. erstelle einen Assets Ordner unter Android/app/src/main
  2. curl "http://localhost:8081/index.Android.bundle?platform=Android" -o "Android/app/src/main/assets/index.Android.bundle"

bitte werfen Sie einen Blick auf die Antwort von kzzzf, um weitere Einzelheiten zu erfahren.

192
Matthew

So bündeln Sie die JS-Datei in Ihrem Apk, während Ihr Server ausgeführt wird (react-native start), und laden Sie das Bundle in das Assets-Verzeichnis Ihrer App herunter:

curl "http://localhost:8081/index.Android.bundle?platform=Android" -o "Android/app/src/main/assets/index.Android.bundle"

Mit der nächsten Version (0.12) werden wir den Befehl react-native bundle so korrigieren, dass er erwartungsgemäß mit Android Projekten funktioniert.

106
kzzzf

Folgendes hat es für mich unter Ubuntu 14.04 funktioniert:

cd (App Dir)
react-native start > /dev/null 2>&1 &
adb reverse tcp:8081 tcp:8081

Update : Siehe

Update 2 : @scgough Wir haben diesen Fehler erhalten, weil React Native (RN) kein JavaScript vom laufenden Dev-Server abrufen konnte unsere Arbeitsplätze. Sie können hier sehen, warum dies passiert:

https://github.com/facebook/react-native/blob/42eb5464fd8a65ed84b799de5d4dc225349449be/ReactAndroid/src/main/Java/com/facebook/react/devsupport/DevServerHelper.Java#L116

Wenn Ihre RN-App feststellt, dass Sie Genymotion oder den Emulator verwenden, wird versucht, JavaScript von GENYMOTION_LOCALHOST (10.0.3.2) oder EMULATOR_LOCALHOST (10.0.2.2) abzurufen. Andernfalls wird davon ausgegangen, dass Sie ein Gerät verwenden, und es wird versucht, das JavaScript von DEVICE_LOCALHOST (localhost) abzurufen. Das Problem ist, dass der dev-Server auf dem localhost Ihrer Workstation und nicht auf dem Gerät ausgeführt wird. Um es also zum Laufen zu bringen, müssen Sie entweder:

87
dsissitka

Ok, ich denke, ich habe herausgefunden, worum es hier geht. Das hatte mit der Version von watchman zu tun, die ich ausgeführt habe.

Führen Sie in einer neuen Shell brew update aus, dann: brew unlink watchman, dann: brew install watchman

jetzt können Sie react-native start in Ihrem Projektordner ausführen

Ich lasse diese Shell geöffnet, erstelle ein neues Shell-Fenster und führe Folgendes aus: react-native run-Android aus meinem Projektordner. Mit der Welt ist alles in Ordnung.

ps. Ich war ursprünglich auf Version 3.2 von Watchman. Das hat mich auf 3.7 hochgestuft.

pps. Ich bin neu in diesem Bereich, das ist vielleicht nicht der schnellste Weg zur Lösung, aber es hat für mich funktioniert.

* MEHR INFOS ZUM LAUFEN/FEHLERBEHEBEN AUF EINEM GERÄT *

Möglicherweise wird bei der Bereitstellung Ihrer App auf Ihrem Android Gerät anstelle eines Emulators ein roter Todesbildschirm mit der Fehlermeldung Unable to load JS Bundle angezeigt. Sie müssen den Debug-Server für Ihr Gerät so einstellen, dass Ihr Computer darauf reagiert ... entweder sein Name OR IP-Adresse.

  1. Drücken Sie die Gerätetaste Menu
  2. Dev Settings auswählen
  3. Debug server Host for device auswählen
  4. Geben Sie die IP-Adresse Ihres Rechners ein und laden Sie JS neu sowie den React-Port, z. 192.168.1.10:8081

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

38
scgough

Führen Sie in Ihrem Projektverzeichnis Folgendes aus

react-native start

Es gibt Folgendes aus:

$ react-native start
 ┌────────────────────────────────────────────────────────────────────────────┐ 
 │  Running packager on port 8081.                                            │ 
 │                                                                            │ 
 │  Keep this packager running while developing on any JS projects. Feel      │ 
 │  free to close this tab and run your own packager instance if you          │ 
 │  prefer.                                                                   │ 
 │                                                                            │ 
 │  https://github.com/facebook/react-native                                  │ 
 │                                                                            │ 
 └────────────────────────────────────────────────────────────────────────────┘ 
Looking for JS files in
   /home/user/AwesomeProject 


React packager ready.

[11:30:10 PM] <START> Building Dependency Graph
[11:30:10 PM] <START> Crawling File System
[11:30:16 PM] <END>   Crawling File System (5869ms)
[11:30:16 PM] <START> Building in-memory fs for JavaScript
[11:30:17 PM] <END>   Building in-memory fs for JavaScript (852ms)
[11:30:17 PM] <START> Building in-memory fs for Assets
[11:30:17 PM] <END>   Building in-memory fs for Assets (838ms)
[11:30:17 PM] <START> Building Haste Map
[11:30:18 PM] <START> Building (deprecated) Asset Map
[11:30:18 PM] <END>   Building (deprecated) Asset Map (220ms)
[11:30:18 PM] <END>   Building Haste Map (759ms)
[11:30:18 PM] <END>   Building Dependency Graph (8319ms)
16
Pēteris Caune

Eine einfache Lösung, die für mich mit Ubuntu 14.04 funktioniert.

react-native run-Android

Der Emulator (bereits gestartet) kehrt zurück: JS Bundle kann nicht heruntergeladen werden. Starten Sie den JS-Server erneut:

react-native start

Drücken Sie im Emulator auf JS neu laden. Es hat bei mir funktioniert. Hoffe, es wird helfen

13
Raphael_b

In der App auf Android habe ich Menü (Befehl + M in Genymotion) -> Dev Settings -> Debug Server Host & Port für Gerät geöffnet

setzen Sie den Wert auf: localhost: 8081

Es hat bei mir funktioniert.

8
Daniel Masarin

Nachdem ich hier eine Kombination der Antworten ausprobiert habe, funktioniert dies für mich.

Ich benutze Genymotion als Emulator.

1 Starten Sie den Genymotion-Emulator.

2 Von einem Terminal

cd AwesomeProject
react-native run-Android # it loads in genymotion and fails with bundle error
react-native start > /dev/null 2>&1 & # from dsissitka
adb reverse tcp:8081 tcp:8081 # from dsissitka

3 Laden Sie aus dem Emulator neu.

Es lädt!

Ich kann jetzt anfangen, mich zu entwickeln.

6
ooolala

Lösche die App von deinem Handy! Ich habe mehrere Schritte ausprobiert, aber das hat es schließlich geschafft.

  1. Wenn Sie zuvor versucht haben, Ihre App auszuführen, dies jedoch fehlgeschlagen ist, Löschen von Ihrem Android Gerät.
  2. $ react-native run-Android ausführen
  3. Öffnen Sie das Menü React Rage Shake in Ihrer App auf Ihrem Android Gerät, gehen Sie zu Dev Settings und dann zu Debug server Host & port for device. Geben Sie dort Ihre Server-IP (IP Ihres Computers) und Host 8081 ein, z. 192.168.50.35:8081. Auf einem Mac finden Sie die IP Ihres Computers unter System Preferences -> Network -> Advanced... -> TCP/IP -> IPv4 Address.
  4. Öffnen Sie das Rage Shake-Menü erneut und klicken Sie auf Reload JS.
4
Andru

Ich habe nicht genug Ruf, um einen Kommentar abzugeben, aber das bezieht sich auf die Antwort von dsissitka. Es funktioniert auch unter Windows 10.

Zur Wiederholung lauten die Befehle:

cd (App Dir)
react-native start > /dev/null 2>&1 &
adb reverse tcp:8081 tcp:8081
2
Sean Saito

Hier sind die einfachen Schritte, um Ihre App auf Android (Release) auszuführen:

1. Gehen Sie zu Ihrem Anwendungsstamm.

2. Führen Sie diesen Befehl aus.

react-Native Bundle --Plattform Android --Dev false --Eintragsdatei index.Android.js --Bundle-Ausgabe Android/App/Src/Main/Assets/index.Android.bundle - asset-dest Android/app/src/main/res

Alle Ihre Dateien werden kopiert.

. Erstellen Sie signierte APK.

Öffnen Sie Android Studio.

Build> Generate Signed APK> [Erforderliche Details ausfüllen, Tastendruck muss vor diesem Schritt generiert werden]

Deine APK sollte fehlerfrei generiert werden. Installieren Sie auf Ihrem Gerät und dies sollte ohne Probleme funktionieren.

Sie können Ihr Gerät auch anschließen und direkt auf das Symbol Ausführen in Android Studio klicken, um es zu testen.


Tastenanschlag wird generiert:

  1. Gehe zu C:\Programme\Java\jdkx.x.x_x\bin

  2. Lauf

keytool -genkey -v -keystore d:\my_private_key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

Sie werden wahrscheinlich aufgefordert, einige Details einzugeben. Tun Sie es und Sie haben Ihre Tastendatei (my_private_key.keystore), mit der Sie Ihre apk signieren können.

2
Edison D'souza

Offensichtlich wurde adb reverse in Android 5.0 eingeführt
Bei "adb reverse" wird zweimal "error: closed" angezeigt

Ich denke, wir müssen mit der Antwort von kzzzf weitermachen

2

Läuft auf dem Gerät

Ich habe eine andere Antwort gefunden.

  • adb reverse: funktioniert nur mit Android 5.0+ (API 21).
  • Ein weiteres: Öffnen Sie das Entwicklermenü, indem Sie das Gerät schütteln, und wechseln Sie zu Dev Settings , Go Debug server Host for device , geben Sie die IP-Adresse Ihres Rechners und den Port des lokalen Entwicklers ein Server
1
Mike Nguyen

Ich bekam dies unter Linux, nachdem ich den react-native run-Android -Prozess abgebrochen hatte. Scheint, dass der Knotenserver noch ausgeführt wird. Wenn Sie ihn das nächste Mal ausführen, wird er nicht ordnungsgemäß ausgeführt und Ihre App kann keine Verbindung herstellen.

Die Lösung besteht darin, den Knotenprozess abzubrechen, der in einem Xterm ausgeführt wird, den Sie durch ctrl-c in diesem Fenster (einfacher) abbrechen können, oder indem Sie lsof -n -i4TCP:8081 und dann kill -9 PID verwenden.

Führen Sie dann react-native run-Android erneut aus.

1
Travis Reeder

Ein Update

Jetzt muss unter Windows nicht mehr reaktionsnativ gestartet werden. Der Packager wird automatisch ausgeführt.

1

Eine wichtige Sache, die noch niemand erwähnt hat: Überprüfen Sie Ihre lokale Firewall und stellen Sie sicher, dass sie ausgeschaltet ist .

Siehe meine Antwort hier: https://stackoverflow.com/a/41400708/1459275

1
niltoid

Überprüfen Sie Ihre WLAN-Verbindung.

Eine andere Möglichkeit könnte sein, dass Sie entweder nicht mit WLAN verbunden sind, mit dem falschen Netzwerk verbunden sind oder die IP-Adresse in Ihren Entwicklereinstellungen falsch ist. Aus irgendeinem Grund hat sich mein Android vom WLAN getrennt und ich bekam diesen Fehler unwissentlich.

1
Kelsey

Dieser Fehler kann leicht durch folgende Schritte behoben werden:

    //run the command at /Android sdk / platforms-tool folder
        adb reverse tcp:8081 tcp:8081

    //now come to root folder of your app
    1. npm start
    2. create 'assets' folder inside rootApp/Android/app/src/main/
    3. curl "http://localhost:8081/index.Android.bundle?platform=Android" -o "Android/app/src/main/assets/index.Android.bundle"
    4. make sure anyone physical or virtual device attached is running.
    5. react-native run-Android
0
Atif Hussain

In new React Native (mit Sicherheit 0.59) Debug-Konfiguration ist in Android/app/src/debug/res/xml/react_native_config.xml

<?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-config>
</network-security-config>
0
bobu

Befolgen Sie die Anweisungen auf der offiziellen Seite , um dieses Problem zu beheben. Dieses Problem tritt auf realen Geräten auf, da sich das JS-Bundle auf Ihrem Entwicklungssystem befindet und die App auf Ihrem realen Gerät nicht weiß, wo es sich befindet.

0
mthakuri

Starten Sie die beiden Terminals auf dem gleichen und 1. Terminallauf reaktiv-nativ starten und 2. Terminalreaktiv-nativ-Android Dieses Problem ist auf einfache Weise zu lösen. Und viel Glück

0
Chaurasia

Die erste Frage befasste sich mit dem erneuten Laden der Anwendung in ein physikalisches Gerät.

Wenn Sie die Anwendung auf einem physischen Gerät debuggen (z. B. über ADB), können Sie das JS-Bundle neu laden, indem Sie oben links auf die Schaltfläche "Aktion" Ihres Geräts klicken. Dies öffnet das Optionsmenü (Neu laden, JS remote debuggen ...).

Hoffe das hilft.

0
GuGuss

Ich verwende nur Ubuntu und Android und konnte es nicht zum Laufen bringen. Ich habe eine sehr einfache Lösung gefunden: Aktualisieren Sie Ihre package.json-Datei, indem Sie die folgenden Zeilen ändern:

"scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },

zu

"scripts": {
    "start": "adb reverse tcp:8081 tcp:8081 && node node_modules/react-native/local-cli/cli.js start"
  },

Anschließend führen Sie den Server durch Eingabe aus

npm run start

Dadurch wird sichergestellt, dass das Gerät Android nicht lokal auf dem Telefon, sondern auf Ihrem Computer nach dem Knotenserver sucht.

0
IonicBurger