Fehler "BatchedBridge konnte nicht abgerufen werden, stellen Sie sicher, dass Ihr Bundle ordnungsgemäß verpackt ist" beim Start der App

167

Beim Versuch, ein reaktionsnatives Projekt unter Android 4.4.2 zu erstellen, wird dieser Fehlerbildschirm angezeigt

besagter Fehler

und konnte keinen Weg finden, es zu lösen. Ich habe versucht, den Packager neu zu starten, das Gerät wieder anzuschließen, sogar reaktionsnativ neu zu installieren und ein neues Projekt zu starten. Ab Version 6.0.0 funktioniert es einwandfrei.

Zygro
quelle
1
Haben Sie diesen Fehler nach der Ausführung erhalten react-native run-android? In diesem Fall wird der Fehler angezeigt, der seltsam ist, da im Debug-Modus das JS-Bundle afaik nicht benötigt werden sollte, da es eine Verbindung zum Paketserver herstellen soll.
Ryan H.
Ich habe eine Antwort auf das gleiche Problem hier gepostet: stackoverflow.com/a/45110063/706798
Anton
Ich erhalte dieselbe Fehlermeldung, jedoch für iOS. Hat jemand einen Rat? Ich habe versucht, 'react-native run-ios' auszuführen, aber es funktioniert nicht, da sich XCode für mich auf einem externen Laufwerk befindet.
Ryanwebjackson

Antworten:

145

Eine mögliche Lösung hierfür besteht darin, dass Sie Ihre Anwendung höchstwahrscheinlich nicht zuerst bündeln, die folgenden Schritte ausführen und dann Ihre app-debug.apk auf Ihrem Gerät bereitstellen

$ cd myproject  
$ react-native start > /dev/null 2>&1 &  
$ curl "http://localhost:8081/index.android.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"

(Wenn der Ordner assetsnicht existiert, erstellen Sie ihn)

Führen Sie dann vom Projektstamm aus

$> (cd android/ && ./gradlew assembleDebug)

installiere die erstellte apk auf deinem Gerät vom Speicherort: android/app/build/outputs/apk/app-debug.apk

Lassen Sie mich wissen, ob dies Ihr Problem behebt

EDIT :

Sie können es einfach als Skript in Ihre package.json einfügen, um es zu automatisieren. Ich glaube, es wird in kommenden Versionen von react-native behoben und vor dem Zusammenstellen der endgültigen APK ausgeführt, daher wird dies nicht benötigt (ich hoffe) auch)

stellen :

"scripts": {
    "build": "(cd android/ && ./gradlew assembleDebug)",
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "bundle-android": "react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --sourcemap-output android/app/src/main/assets/index.android.map --assets-dest android/app/src/main/res/"
  },

oder wie erwähnt das Curl-Äquivalent, aber in den meisten Fällen ist das Obige robuster

tbo
quelle
4
Ja es funktioniert!!! Was habe ich gerade gemacht? warum locken? Kann dies auch automatisiert werden?
Zygro
Vielen Dank, denn meine App verknüpft das native React-Bundle nicht.
GeekHades
3
Das scheint ein Hack zu sein. Wenn Sie das JavaScript in eine einzelne Datei packen, erhalten Sie dann nicht die Live-Reload-Funktion, während Sie die App während der Entwicklung ausführen?
Liron Yahdav
2
Dies ist nicht für die Entwicklung, sondern für die eigentliche APK-Verpackung
bis zum
Es passiert nichts, wenn ich immer noch einen Fehler erhalte: - com.facebook.react.devsupport.JSException: BatchedBridge konnte nicht abgerufen werden. Stellen Sie sicher, dass Ihr Bundle korrekt verpackt ist.
Dinesh R Rajput
110

Ich bin auch auf dieses Problem gestoßen. Ich habe die App auf meinem Gerät zwangsweise beendet, dann eine andere Konsole geöffnet und ausgeführt

react-native start

und dann habe ich die App wieder von meinem Gerät aus geöffnet und sie hat wieder funktioniert.

BEARBEITEN: Wenn Sie ein Android-Gerät über USB verwenden und den Netzstecker gezogen haben oder Ihr Computer in den Ruhezustand versetzt wurde, müssen Sie möglicherweise zuerst ausführen

adb reverse tcp:8081 tcp:8081
Felipe
quelle
5
Dies löste mein Problem bei der Verwendung react-native run-android. Das Verwenden react-native startwar für mich nie erforderlich, als ich es tatreact-native run-ios
Dylan Pierce
2
Das hat funktioniert, aber warum passiert das? Wird das behoben? Muss ich immer 2 Terminals öffnen und zuerst "starten", bevor ich es auf einem Gerät ausführen kann?
Marko
es funktioniert auch bei mir! verbrachte Stunden, um eine Lösung zu finden
dtjmsy
adb reverse tcp:8081 tcp:8081war an sich genug für mich. Danke vielmals!
Darius
Dies ist fantastisch, nachdem Sie ./adb installieren konnten
Faris Rayhan
27

Habe gerade diesen Fehler bekommen. Folgendes habe ich getan, um das Problem zu beheben: Ich habe ausgewählt Dismiss, bin in das Entwicklermenü gegangen und habe dann ausgewählt Dev Settings, Debug server host & port for deviceich habe die IP-Adresse meines Computers und den Port hinzugefügt: 192.168.0.xx:8xxxVerwenden Sie die IP-Adresse Ihres Entwicklercomputers, die sich in Ihrem WLAN-Netzwerk befindet. Der Hafen ist in der Regel:8081

Sobald ich das getan habe, ging alles gut. Denken Sie auch daran, während Sie im Dev-Menü sind, auszuwählen, Enable Live Reloadund Debug JS Remotelyes erleichtert Ihnen das Leben beim Debuggen erheblich.

Würfel
quelle
Funktioniert! Für Ubuntu-Benutzer: Ausführen ifconfig, dann finden Sie inet addr: xxx.xxx.xxx.xxx wobei xxx * Ihre Entwicklermaschine ip
henggana
Dies funktionierte für mich auf einer API-Ebene 19 / Kitkat 4.4, siehe stackoverflow.com/questions/31525431/… , facebook.github.io/react-native/docs/…
Michael Ribbons
Danke dir! Ich muss diese Konfiguration nur durchführen, wenn ich ohne USB-Kabel debugge (mit Tools wie WiFi ADB).
Fidan Hakaj
4
Es ist wichtig zu beachten, dass Sie das Entwicklermenü, auf das @cube oben verweist, erstellen können, indem Sie Ihr Android-Gerät physisch schütteln. Das mag seltsam erscheinen, aber das wird es ansprechen. Folgen Sie dann den restlichen Anweisungen. Das hat es für mich behoben.
Flyingace
22

Das hat bei mir funktioniert (nachdem ich jede andere Lösung ausprobiert hatte, die ich gefunden habe ...):

Lauf adb reverse tcp:8081 tcp:8081hinein\Android\sdk\platform-tools

Chaim Salzer
quelle
1
kann diesen Befehl überall ausführen, muss nicht in Plattform-Tools b
Goldylucks
1
Ich habe festgestellt, dass react-native run-androidversucht wird, diesen Befehl auszuführen und von der Windows-Umgebungsvariablen abhängt path, um den platform-toolsPfad zu enthalten .
Straya
1
Danke, das hat funktioniert. Pfad ist C: \ Benutzer \ USERNAME \ AppData \ Local \ Android \ sdk \ Plattform-Tools
Chazefate
Nein, funktioniert nicht unter Windows 10 und Android Emulator
Pixel
16

Ich habe dies auch erhalten, als ich zum ersten Mal mit React Native auf einem physischen Gerät angefangen habe. Wenn dies der Fall ist, müssen Sie einige zusätzliche Dinge tun, bevor Sie beginnen können. Sie müssen einige Informationen zu Ihrem Entwicklungscomputer in die 'Dev Settings' von React Native eingeben.

Wenn Sie den Fehler sehen, schütteln Sie Ihr Gerät . Ein Dialogfeld wird angezeigt. Die letzte Option ist "Dev Settings". Wählen Sie "Server-Hot & Port für Gerät debuggen" und geben Sie Ihre lokale IP-Adresse und den verwendeten Port (normalerweise 8081) ein.

Siehe den letzten Absatz von https://facebook.github.io/react-native/docs/running-on-device-android.html

Richh94
quelle
Dies ist buchstäblich eine Wiederholung, wörtlich von dem, was ich oben (im August) gesagt habe
Würfel
3
Ich wusste nicht, dass ich das Gerät schütteln muss. Zuerst würde ich es als Kommentar posten, aber ich habe nicht genug Punkte, um das zu tun. Ich habe Ihren Beitrag positiv bewertet.
Richh94
Einfachste und sauberste Lösung. Vielen Dank!
CallOfCode
7

Wenn keine der Lösungen für Sie funktioniert, versuchen Sie Folgendes:

Ich fand, dass mein <root>/android/app/build/intermediates/assets/debugOrdner leer war und liefcd android && ./gradlew assembleDebug nicht die erforderlichen Dateien erstellt wurden, die später vom Javascript-Thread in unseren reaktionsfähigen nativen Apps verwendet werden.

Ich habe den folgenden Befehl manuell ausgeführt, den der Befehl debug build idealerweise hätte erstellen sollen.

node node_modules/react-native/local-cli/cli.js bundle --platform android --dev true --reset-cache --entry-file index.android.js --bundle-output /<path to dir>/android/app/build/intermediates/assets/debug/index.android.bundle --assets-dest /<path to dir>/android/app/build/intermediates/res/merged/debug

Nachdem ich diese Befehle ausgeführt hatte, fand ich zwei Bundle-Dateien in diesem Verzeichnis <root>/android/app/build/intermediates/assets/debug

Und dann lief ich wieder cd android && ./gradlew installDebugmeine App begann wieder zu funktionieren.

Wird mehr debuggen und würde aktualisieren, was tatsächlich fehlschlägt.

Sumit Kushwaha
quelle
Nur um zu verdeutlichen, was los ist, scheint es, dass beim Integrieren eines nativen React in ein vorhandenes Projekt der Bundle-Ausgabepfad NICHT automatisch festgelegt wird, sodass Sie ihn selbst festlegen müssen. Daher der Bundle-Ausgabepfad = / Pfad / zu / Assets?
Robsstackoverflow
Du bist übrigens der Beste.
Robsstackoverflow
7

Schließen Sie Ihr Gerät in einem separaten Terminal an den Computer an und führen Sie die folgenden Befehle aus:

react-native start 
cd user/Library/Android/sdk/platform-tools/
./adb reverse tcp:8081 tcp:8081

Anwendungsterminal :

react-native run-android 
install apk on your device from this location android/app/build/outputs/apk/app-debug.apk
Brijmohan Karadia
quelle
1
Vielleicht könnten Sie Ihre Antwort erweitern, um ein bisschen mehr Details darüber aufzunehmen, was die einzelnen Schritte in Ihrer Antwort bedeuten, aus welchen Verzeichnissen die Befehle ausgeführt werden sollen usw.? Ich denke, das würde Ihre Antwort viel hilfreicher machen.
Niels
Dies ist die richtige Antwort. Auf diese Weise können Sie schnell iterieren, indem Sie eine Verbindung zum reaktiven nativen Server herstellen, anstatt das Bundle bei jeder Änderung neu packen zu müssen.
Joshua Pinter
6

Es ist etwas zu spät, aber das funktioniert wirklich für mich.

  1. react-native run-android.
  2. react-native start.

Der erste Befehl wird apkfür Android erstellt und auf Ihrem Gerät bereitgestellt, wenn es verbunden ist. Wenn Sie die App öffnen, wird ein fehlerhafter roter Bildschirm angezeigt. Führen Sie dann den zweiten Befehl aus, mit dem der Packager ausgeführt und das App-Bundle für Sie erstellt wird.

Shamsher
quelle
5

Versuchen Sie diesen Befehl im Terminal und laden Sie ihn erneut. Es hat bei mir funktioniert

adb reverse tcp: 8081 tcp: 8081

Praneeth
quelle
5

siehe Ausgabe :

1.reaktiver Start

2.Klicken Sie Reload(R,R)auf Ihr Gerät.

XYz Amos
quelle
5
  1. Starten Sie die Genymotion neu
  2. Lauf react-native run-android
  3. das Problem wurde gelöst
Yang
quelle
Wirklich? restart the genymotion? Ty vole.
Michal
Das ist so, als würde man sagen: "Oh, Ihre Website funktioniert nicht? Starten Sie Ihren Server neu."
Michal
4

Ich hatte die gleiche Ausnahme auf dem Gerät Z3 Compact D5803 - 6.0.1

Ich habe die .buckconfig-Datei geöffnet und die Zeile geändert:

target = Google Inc.:Google APIs:23

zu

target = Google Inc.:Google APIs:24

Weil ich im SDK Manager gesehen habe, dass Android 6.X API Level 24 hat.

laszl0
quelle
3

Für mich liegt es daran, dass adbes nicht in der war PATH. Es befindet sich /Users/man/Library/Android/sdk/platform-toolsfür mich, es ist vielleicht woanders für Sie, aber finden Sie es trotzdem und fügen Sie es Ihrem Pfad hinzu, um zu sehen, ob dies hilft.

h - n
quelle
3

Da Sie Android <5.0 verwenden, können Sie die Standardmethode nicht verwenden. adb reverseFacebook hat jedoch eine offizielle Dokumentation hinzugefügt , um über Wi-Fi eine Verbindung zum Entwicklungsserver herzustellen , die Ihre Version unterstützen würde. Zitieren Sie die Anweisungen für MacOS, aber sie haben sie auch für Linux und Windows:

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.

Die IP-Adresse finden Sie unter Systemeinstellungen → Netzwerk.

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. Öffnen Sie das In-App-Entwicklermenü. Gehen Sie zu Dev Settings → Debug Server Host für Gerät. Geben Sie die IP-Adresse Ihres Computers und den Port des lokalen Entwicklungsservers ein (z. B. 10.0.1.1:8081). Gehen Sie zurück zum Entwicklermenü und wählen Sie JS neu laden.

Jesús Carrera
quelle
3

Es hatte dieses Problem "zufällig" und ich brauchte einige Zeit, um zu erkennen, was in meinem Szenario falsch war.

Nachdem ich auf React-native-cli 2.0.1 aktualisiert habe, wurde eine Meldung im Protokoll ausgegeben, die mir half, die Grundursache zu ermitteln:

JS-Server nicht erkannt, Fortsetzung mit Build ...

Nachdem ich einige Links recherchiert hatte, fand ich diesen:

JS-Server kann nicht erkannt werden

Da ich unter Windows bin, habe ich netstat ausgeführt und festgestellt, dass mein VLC-Player auch auf Port 8081 ausgeführt wurde, was das Problem verursacht hat. In meinem Fall würde es also nicht funktionieren, wenn ich den vlc-Server vor dem reaktionsnativen Server starten würde.

Dieselbe Protokollnachricht wurde in früheren Versionen von react-native-cli nicht ausgegeben, sodass sie unbemerkt fehlschlug.

TL, DR: Überprüfen Sie, ob am selben Port wie der Paketmanager etwas ausgeführt wird (standardmäßig 8081).

Luiz Henrique Martins Lins Rol
quelle
2

Mein Problem war, dass ich meine AndroidManifest.xmlDatei durchgesehen und die Zeile entfernt hatte

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

weil meine App kein Internet braucht. Die reaktive native Debugging-App benötigt jedoch einen Internetzugang (um auf den Packager zuzugreifen). :) :)

SpencerL
quelle
1
Mann, du hast meinen Tag gerettet. Hat mir die Haare abgerissen :)
Christophe Cadilhac
2

Versuchen Sie, den Cache zu bereinigen

React-Native Start - Reset-Cache

Hitesh Sahu
quelle
2

Bitte überprüfen Sie, ob beim Ausführen der folgende Fehler auftritt react-native run-android: adb server version (XX) doesn't match this client (XX); killing...

In diesem Fall stellen Sie sicher , /usr/local/opt/android-sdk/platform-tools/adbund /usr/local/bin/adbauf die gleiche spitzadb

In meinem Fall wurde auf eines hingewiesen /Users/sd/Library/Android/sdk/platform-tools/adb(Android SDK), aber auf ein anderes wurde verwiesen/usr/local/Caskroom/android-platform-tools/26.0.2/platform-tools/adb (Homebrew)

Und das Problem wurde behoben, nachdem beide darauf hingewiesen hatten /Users/sd/Library/Android/sdk/platform-tools/adb(Android SDK)

Serhey Dolgushev
quelle
1

Ich habe auch diesen Fehler bekommen, wirklich verwirrt. Weil alle Antworten nicht funktionieren. Kurz nachdem Sie adb zum Pfad hinzugefügt haben .

Bruce Lee
quelle
1

Für mich war die Seitensynchronisierung aktiviert und aktiv. Durch das sofortige Schließen wurde das Problem behoben. Es kann sich lohnen, diese oder eine andere Kommunikation zwischen PC und Gerät zu schließen

lee_dabiker
quelle
1

Am Ende musste ich den von mir verwendeten Port öffnen (standardmäßig 8081). Unter Linux können Sie Folgendes tun

sudo iptables -A INPUT -p tcp --dport 8081 -m conntrack --ctstate NEW,ESTABLISHED -j ACCEPT
sudo iptables -A OUTPUT -p tcp --sport 8081 -m conntrack --ctstate ESTABLISHED -j ACCEPT

Sie können testen, ob Sie dies tatsächlich tun müssen. Navigieren Sie einfach auf Ihrem Android-Gerät zu Ihrem Entwickler-Server in Chrome. Wenn es nicht reagiert, ist dies möglicherweise das, was Sie brauchen. Wenn es reagiert, hilft Ihnen das nicht weiter.

Anthony Naddeo
quelle
1

Mein Weg sind:

react-native start

Danach in Ihrem Gerät mit:

click to Reload.

Siehe in Console React-Native, es wird js Bundle-Daten abrufen.

ThienSuBS
quelle
Dies war mein Problem, da das Terminal nicht gestartet wurde. Vielen Dank !
Nicolas Leucci
1

Ich hatte das gleiche Problem. Als ich ein React Native-Projekt über die Create-React-Native-App AwesomeProject erstellt habe es in der Expo-App auf dem Telefon gut funktioniert. Danach wollte ich dieses Schnellstartprojekt für die Entwicklung meines Projekts verwenden und bekam den gleichen Fehler wie Sie.

Nach einigen Recherchen finde ich heraus, dass es besser ist, ein neues Projekt mit dem reaktionsnativen Init AwesomeProject zu starten (mit allen Einstellungen in den reaktionsnativen Dokumenten). Führen Sie dann diesen Befehl aus:

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

Das sollte das Problem mit dem Bundle beheben (--dev false zeigt keine Warnungen an)

Alles, was Sie tun müssen, damit die App auf Ihrem virtuellen / realen Gerät ausgeführt werden kann, ist:

react-native run-android

Und es sollte gut funktionieren. Zumindest hat es bei mir funktioniert.

Sebastian Voráč
quelle
1

Für mich war das Problem, dass 'adb' nicht erkannt wurde - überprüfen Sie diese Antwort.

Um dies zu beheben, fügen Sie C: \ Users \ USERNAME \ AppData \ Local \ Android \ sdk \ platform-tools zu Umgebungsvariablen hinzu

netter Mann
quelle
Dies ist nichts weiter als ein Kommentar. Wenn Sie jedoch die letzte Zeile Ihrer verknüpften Antwort hier einfügen, wird diese Antwort gültig. Andernfalls besteht die Möglichkeit, dass diese Antwort entfernt wird.
Amit Joshi
1

Die meisten von uns sind zum ersten Mal mit diesem Problem konfrontiert, wenn wir anfangen, das native Projekt Nr. 1 zu reagieren.

Nur wenige einfache Schritte haben mein Problem gelöst:

Ich habe ein Beispielprojekt mit dem folgenden Befehl erstellt:

react-native init ReactProject1

Lösung

Die Lösung ist , um Hilfe local-cli\runAndroid\adb.jszu finden adb.exe, die gleiche Art und Weise wielocal-cli\runAndroid\runAndroid.js :

Finden Sie die Ersetzungsanweisung unter Projektname (was auch immer Sie angegeben haben).\node_modules\react-native\local-cli\runAndroid

Ersetzen:

const devicesResult = child_process.execSync('adb devices');

Durch:

const devicesResult = child_process.execSync( (process.env.ANDROID_HOME ? process.env.ANDROID_HOME + '/platform-tools/' : '') + 'adb devices');

Nachdem Sie den obigen Austausch durchgeführt haben, führen Sie einfach reag-native run-android in Ihrem cmd aus. Es wird apk bündeln und zunächst versuchen, js bundle lokal auf Ihrem Gerät zu installieren. (Erfolg gehabt)

DeepakPanwar
quelle
0

Ich habe viele der Vorschläge oben / unten ausprobiert, aber letztendlich war das Problem, mit dem ich konfrontiert war, eine Berechtigung mit Watchman, die zuvor mit Homebrew installiert wurde. Wenn Sie beim Versuch, den Emulator zu verwenden, Ihre Terminalnachrichten anzeigen und Fehler in Bezug auf den Watchman sowie die Meldung "BatchedBridge konnte nicht abgerufen werden" auf Ihrem Emulator feststellen, gehen Sie wie folgt vor:

Gehen Sie in Ihr /Users/<username>/Library/LaunchAgentsVerzeichnis und ändern Sie die Berechtigungseinstellungen, damit Ihr Benutzer lesen und schreiben kann. Dies ist unabhängig davon, ob Sie tatsächlich eine com.github.facebook.watchman.plistDatei darin haben oder nicht .

alexfigtree
quelle
0

Ich fand, dass ich auch ein hinzufügen musste

React-Native-Upgrade

um die Anwendung korrekt auszuführen.

M. Solle
quelle
0

Ich habe das gleiche Problem, aber es war ein dummer Fehler von mir ...

Von Android Studio aus habe ich installDebug/installReleaseGradle Script von appProjet anstelle von rootProjet gestartet .

Martin Choraine
quelle
0

Einfachster Weg!

  • Stoppen Sie den Server und beenden Sie die Projekterstellung.
  • Öffnen Sie ein 'Node.js'-Terminal.
    • Navigieren Sie zu einem Ordner mit dem Projekt "React-Native".
    • Typ 'React-Native Start' - Startet den React Native Server manuell.
  • Gehen Sie zu Ihrem Code Editor Terminal und geben Sie 'react-native run-android' ein.

Du bist gut zu gehen!

Jason
quelle
0

Starten Sie einfach Ihr System oder Ihr gesamtes Bundle neu und das Problem kann behoben sein.

Vinayak Gupta
quelle