Android n'a pas réussi à charger le bundle JS


201

J'essaie d'exécuter AwesomeProject sur mon Nexus5 (Android 5.1.1).

Je peux construire le projet et l'installer sur l'appareil. Mais quand je l'exécute, j'ai un écran rouge disant

Impossible de télécharger le bundle JS. Avez-vous oublié de démarrer le serveur de développement ou de connecter votre appareil?

Dans Reaper natif iOS, je peux choisir de charger jsbundle hors ligne. Comment puis-je faire la même chose pour Android? (Ou au moins, où puis-je configurer l'adresse du serveur?)

Mettre à jour

Pour exécuter avec un serveur local, exécutez les commandes suivantes sous le répertoire racine de votre projet natif de react

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

veuillez consulter la réponse de dsissitka pour plus de détails.

Pour fonctionner sans serveur, regroupez le fichier js dans l'apk en exécutant:

  1. créer un dossier de ressources sous android/app/src/main
  2. curl "http://localhost:8081/index.android.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"

veuillez consulter la réponse de kzzzf pour plus de détails.


Je n'ai pas encore compris le problème. Mais en attendant, vous pouvez l'essayer sur votre simulateur. Cela fonctionne parfaitement bien sur ma génymotion.
Bryan

lorsque j'essaie de taper les deux commandes pour exécuter avec le serveur local, j'obtiens une erreur dans PowerShell disant: "Le caractère esperluette (&) n'est pas autorisé". Je suppose que je devrais être à la racine de mon répertoire d'application lors de l'exécution de la commande?
user2236165

1
Est-ce à dire que le débogage via USB sur Android 4.1 est impossible car adb reversenon pris en charge?
bonh

Je voudrais mentionner que pour pouvoir exécuter, adb reverse tcp:8081 tcp:8081vous avez besoin de la version ADB 1.0.32, l' reverseoption n'est pas en 1.0.31
jvalen

Réponses:


110

Pour regrouper le fichier JS dans votre apk tout en faisant fonctionner votre serveur ( react-native start), téléchargez le bundle dans le répertoire des actifs de votre application:

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

Avec la prochaine version (0.12), nous corrigerons la react-native bundlecommande pour qu'elle fonctionne avec les projets Android comme prévu.


Merci! Comment dire à reactInstanceManager d'utiliser l'actif fourni? Ou la magie se produit-elle automatiquement?
Matthew

9
Impossible de créer le fichier Avertissement: android / app / src / main / assets / index.android.bundle: aucun fichier ou avertissement de ce type: répertoire
almeynman

2
Avertissement: échec de création du fichier Avertissement: android / app / src / main / assets / index.android.bundle: aucun fichier de ce type ou avertissement: répertoire curl: (23) Échec de l'écriture du corps (0! = 16167)
Shivang

3
@Shivang: créez les ressources du répertoire dans android / app / src / main. J'ai eu cette erreur car elle n'existait pas encore.
piscator

1
C'est le moyen le meilleur et le plus simple lorsque nous distribuons l'application localement à des fins de test. (via le tissu) merci
Dinesh Anuruddha

90

Les éléments suivants l'ont fait fonctionner pour moi sur Ubuntu 14.04:

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

Mettre à jour : voir

Update 2 : @scgough Nous avons eu cette erreur car React Native (RN) n'a pas pu récupérer JavaScript à partir du serveur de développement exécuté sur nos postes de travail. Vous pouvez voir pourquoi cela se produit ici:

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

Si votre application RN détecte que vous utilisez Genymotion ou l'émulateur, elle essaie de récupérer le JavaScript à partir de GENYMOTION_LOCALHOST (10.0.3.2) ou EMULATOR_LOCALHOST (10.0.2.2). Sinon, il suppose que vous utilisez un appareil et essaie de récupérer le JavaScript à partir de DEVICE_LOCALHOST (localhost). Le problème est que le serveur de développement s'exécute sur l'hôte local de votre poste de travail, pas sur l'appareil, donc pour le faire fonctionner, vous devez soit:


5
exécuter adb reverse tcp: 8081 tcp: 8081 sur osx fonctionne également
shyamal

Ça marche! Merci beaucoup. Savez-vous s'il existe un moyen de pointer jscodelocation vers une ressource apk, tout comme main.jsbundle d'iOS?
Matthew

@dsissitka puis-je simplement demander pour qu'il soit enregistré ici dans le fil - qu'est-ce que cela fait exactement?
scgough

@Matthew N'a pas peur. Désolé!
dsissitka

Et si nous fonctionnons sur Android 4.2 et obtenons cette erreur: stackoverflow.com/questions/31525431/…
Augustin Riedinger

39

Ok, je pense que j'ai compris quel est le problème ici. Il s'agissait de la version dewatchman je courais.

Dans un nouveau shell, lancez brew update then: brew unlink watchman then:brew install watchman

maintenant, vous pouvez exécuter react-native start partir de votre dossier de projet

Je laisse ce shell ouvert, crée une nouvelle fenêtre shell et lance: react-native run-android depuis mon dossier de projet. Tout est bien avec le monde.

ps. J'étais à l'origine sur la version 3.2 de Watchman. Cela m'a amélioré à 3,7.

pps. Je suis nouveau dans ce domaine, ce qui n'est peut-être pas la voie la plus rapide vers la solution, mais cela a fonctionné pour moi.

* PLUS D'INFO POUR EXÉCUTER / DÉBOGGER SUR UN APPAREIL *

Vous pourriez constater que si vous déployez votre application sur votre appareil Android plutôt qu'un émulateur, vous obtenez un écran rouge de la mort avec une erreur disant Unable to load JS Bundle. Vous devez définir le serveur de débogage de votre appareil pour que votre ordinateur fonctionne en réagissant ... soit son nom OU son adresse IP.

  1. Appuyez sur le Menubouton de l'appareil
  2. Sélectionner Dev Settings
  3. Sélectionnez Debug server host for deviceouChange Bundle Location
  4. Tapez l'IP de votre machine et Reload JS ainsi que le port de réaction, par exemple 192.168.1.10:8081

Plus d'informations: http://facebook.github.io/react-native/docs/running-on-device-android.html


@ jacobross85 Heureux que cela ait aidé! Donnez-moi un vote positif si vous en avez envie ;-)
scgough

1
J'ai dû exécuter brew uninstall watchmanavant d'installer la dernière version pour moi.
Amozoss

J'ai ajouté un peu plus d'informations pour ceux qui déboguent sur un appareil Android plutôt que sur un émulateur.
scgough

J'exécutais déjà la dernière version de Watchman mais cela l'a corrigé pour moi. Weeeeird
pfac

1
Merci pour ce frère c'est vraiment utile. Voilà pourquoi je vais vous donner le vote positif.
Priyank Jotangiya

17

Depuis votre répertoire de projet, exécutez

react-native start

Il génère les éléments suivants:

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

1
J'ai également le problème signalé par le PO. J'exécute le projet à l'aide react-native run-androiddu dossier du projet. Il se construit bien dans le terminal, mais dès que l'application s'ouvre sur mon appareil, je reçois un écran rouge disantUnable to download JS bundle
scgough

6
vous devez exécuter adb reverse tcp: 8081 tcp: 8081
Matthew

1
J'ai couru adb reverse tcp: 8081 tcp: 8081 et j'obtiens une erreur: fermée erreur: fermée
JacobRossDev

1
J'ai le même problème, erreur: fermé. Une aide, s'il vous plaît?
Eusthace

Assurez-vous que votre adresse IP est correcte dans "Paramètres Dev" si vous êtes sur Android. Si vous travaillez avec une adresse IP dynamique, cela peut changer du jour au lendemain.
Sam Purcell

13

Une solution simple qui fonctionne pour moi avec Ubuntu 14.04.

react-native run-android

L'émulateur (déjà lancé) renverra: Impossible de télécharger le pack JS; redémarrez le serveur JS:

react-native start

Appuyez sur Reload JS sur l'émulateur. Ça a marché pour moi. J'espère que cela vous aidera


Fonctionne réellement. De toutes les réponses, c'est la solution la plus simple. Je ne peux pas croire que ce ne soit pas dans le document officiel.
bluecollarcoder

L'OP consiste à fonctionner sur un appareil, pas sur l'émulateur. Ces étapes ne fonctionnent pas sur un appareil sans configuration supplémentaire. Voir la réponse acceptée.
davidgoli

8

Dans l'application sur Android, j'ai ouvert le menu (Commande + M dans Genymotion) -> Paramètres de développement -> Hôte et port du serveur de débogage pour l'appareil

définissez la valeur sur: localhost: 8081

Ça a marché pour moi.


Merci! A travaillé pour moi
Howard

7

Après avoir essayé une combinaison des réponses ici, c'est ce qui fonctionne pour moi.

J'utilise Genymotion comme émulateur.

1 Démarrez l'émulateur Genymotion.

2 Depuis un 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 Rechargez depuis l'émulateur.

Ça charge!

Je peux maintenant commencer à développer.


obtenir "erreur: fermé" deux fois sur "adb reverse"
almeynman

FYI: Je fais maintenant ce qui précède avec la réponse "Daniel Masarin" de définir l'hôte du serveur de débogage à mon adresse WiFi avec le port 8081, cela fonctionne avec RN v 0.17.0
ooolala

merci beaucoup, cela fonctionne pour moi :) sur API 21+ ci-dessus ne fonctionne que cela
Ashwini Bhat

4

Supprimez l'application de votre téléphone! J'ai essayé plusieurs étapes, mais ça l'a finalement fait.

  1. Si vous avez essayé d'exécuter votre application auparavant mais que vous avez échoué, supprimez -la de votre appareil Android.
  2. Courir $ react-native run-android
  3. Ouvrez le menu React Rage Shake à partir de votre application sur votre appareil Android, accédez à Dev Settingspuis à Debug server host & port for device. Là entrez votre serveur IP (IP de votre ordinateur) et l'hôte 8081, par exemple 192.168.50.35:8081. Sur un Mac, vous pouvez trouver l'adresse IP de votre ordinateur à l'adresse System Preferences -> Network -> Advanced... -> TCP/IP -> IPv4 Address.
  4. Ouvrez à nouveau le menu Rage Shake et cliquez sur Reload JS.


2

Je n'ai pas assez de réputation pour commenter, mais cela fait référence à la réponse de dsissitka. Cela fonctionne également sur Windows 10.

Pour réitérer, les commandes sont:

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

2

Voici les étapes simples pour exécuter votre application sur Android (version):

1. Accédez à la racine de votre application.

2. Exécutez cette commande.

bundle react-native --plateforme 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

Tous vos fichiers sont copiés.

3. Créez un fichier APK signé.

Ouvrez le studio Android.

Build> Generate Signed APK> [Remplissez les détails requis, la frappe doit être générée avant cette étape]

Votre fichier APK doit être généré sans aucune erreur. Installez sur votre appareil et cela devrait fonctionner sans aucun problème.

Vous pouvez également connecter votre appareil et appuyer directement sur l'icône Exécuter sur le studio Android pour le tester.


Génération de frappe:

  1. Aller à C: \ Program Files \ Java \ jdkx.x.x_x \ bin

  2. Courir

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

Il vous demandera probablement de remplir certains détails. Faites-le et vous avez votre fichier de frappe ( my_private_key.keystore ) qui peut être utilisé pour signer votre apk.


après react-native bundleavoir eu une erreur: ressources en double
Amir Shabani

1

J'obtenais cela sur Linux après avoir arrêté le react-native run-android processus. Il semble que le serveur de noeud fonctionne toujours, donc la prochaine fois que vous l'exécuterez, il ne fonctionnera pas correctement et votre application ne pourra pas se connecter.

Le correctif ici est de tuer le processus de noeud qui s'exécute dans un Xterm que vous pouvez tuer en ctrl-cutilisant cette fenêtre (plus facile) ou vous pouvez le trouver en utilisant lsof -n -i4TCP:8081ensuitekill -9 PID .

Puis exécutez à react-native run-androidnouveau.


1

Vérifiez votre connexion wifi.

Une autre possibilité pourrait être que vous n'êtes pas connecté au wifi, connecté au mauvais réseau ou que l'adresse IP soit incorrecte dans vos paramètres de développement. Pour une raison quelconque, mon Android s'est déconnecté du wifi et j'ai commencé à obtenir cette erreur, sans le savoir.


Merci, c'était tout. Par défaut, le serveur de débogage est atteint sur le réseau local. Par conséquent, si vous n'avez pas d'accès wifi, vous ne pouvez pas y accéder.
Paul

1

En cours d'exécution sur l'appareil

J'ai trouvé une autre réponse.

  • adb reverse: ne fonctionne que sur Android 5.0+ (API 21).
  • Un autre: ouvrez le menu Développeur en secouant l'appareil, accédez aux paramètres de développement , accédez à l' hôte du serveur de débogage pour l'appareil , saisissez l'adresse IP de votre machine et le port du serveur de développement local

1

Une mise à jour

Maintenant, sur Windows, pas besoin d'exécuter le démarrage natif de React. L'emballeur s'exécutera automatiquement.



0

J'utilise Ubuntu et Android uniquement et je n'ai pas pu le faire fonctionner. J'ai trouvé une solution vraiment simple qui consiste à mettre à jour votre fichier package.json, en changeant ces lignes:

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

à

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

Et puis vous exécutez le serveur en tapant

npm run start

Cela garantit que l'appareil Android recherche le serveur de noeud sur votre ordinateur plutôt que localement sur le téléphone.


0

La question initiale concernait le rechargement de l'application dans un appareil phyisical.

Lorsque vous déboguez l'application dans un appareil physique (c'est-à-dire via adb), vous pouvez recharger le bundle JS en cliquant sur le bouton "action" en haut à gauche de votre appareil. Cela ouvrira le menu d'options (Recharger, Debug JS à distance ...).

J'espère que cela t'aides.


0

Cette erreur peut facilement être résolue en suivant les étapes suivantes:

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

1
puis-je exécuter adb reverse tcp:8081 tcp:8081dans le dossier racine de mon application?
Marson Mao

recherchez le dossier adb dans votre système d'exploitation. son dans le SDK Android / outils de plateforme /
Atif Hussain

1
mais je vois de nombreux endroits faisant référence au fait que cette commande peut être exécutée dans le dossier racine de l'application, également la réponse de dsissitka suggère de l'exécuter dans le dossier de l'application racine, donc je suis vraiment confus.
Marson Mao

peut-être que cette commande est également gérée par react-native. je ne suis pas sûr de cela. mais adb est pris en charge par les outils Android SDK. vous pouvez trouver plus de détails ici facebook.github.io/react-native/docs/…
Atif Hussain

1
@MarsonMao Selon la configuration de votre système, vous pourrez peut-être exécuter adb à partir du répertoire de votre application. Lisez la variable PATH et les packages globaux vs locaux pour plus d'informations.
mchandleraz

0

Vous pouvez suivre les instructions mentionnées sur la page officielle pour résoudre ce problème. Ce problème se produit sur un appareil réel, car le bundle JS se trouve sur votre système de développement et l'application à l'intérieur de votre appareil réel n'est pas au courant de son emplacement.


0

Dans le nouveau React Native (à coup sûr 0.59), la configuration de débogage est à l'intérieur 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

Démarrez les deux terminaux sur le même et le premier terminal exécutez réactif-natif et deuxième terminal réagissent-natif run-android ce problème est résolu de manière simple. Et bonne chance


0

Hé, j'étais confronté à ce problème avec mon projet nu natif, le simulateur IOS fonctionne bien, mais Android ne cessait de me donner cette erreur. voici une solution possible qui a fonctionné pour moi.

étape 1, vérifiez si le périphérique adb est autorisé en exécutant dans votre terminal: périphériques adb

s'il n'est pas autorisé, exécutez les commandes suivantes

étape 2, sudo adb kill-server étape 3, sudo adb start-server

puis vérifiez si la commande adb devices affiche la liste des périphériques connectés au périphérique emulator-5554

au lieu de non autorisé s'il s'agit d'un appareil au lieu de non autorisé

étape 4, exécutez npx react-native run-android

cela a fonctionné dans mon cas, j'espère que cela résout votre problème.


0

J'ai trouvé ça bizarre mais j'ai eu une solution. J'ai remarqué que de temps en temps mon dossier de projet était en lecture seule et je ne pouvais pas l'enregistrer à partir de VS. J'ai donc lu une suggestion de transfert de NPM de l'utilisateur local PATH vers la variable globale PATH à l'échelle du système, et cela a fonctionné comme un charme.


En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.