web-dev-qa-db-fra.com

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

J'essaie de lancer AwesomeProject sur mon Nexus5 (Android 5.1.1).

Je suis capable de construire le projet et de l'installer sur le périphérique. Mais quand je le lance, un écran rouge me dit

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 réagir iOS natif, je peux choisir de charger jsbundle en mode hors connexion. Comment puis-je faire la même chose pour Android? (Ou du moins, où puis-je configurer l'adresse du serveur?)

Mise à jour

Pour exécuter avec un serveur local, exécutez les commandes suivantes dans le répertoire racine de votre projet rea-native

  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, associez le fichier js à l'apk en lançant:

  1. créer un dossier d'actifs sous Android/app/src/main
  2. curl "http://localhost:8081/index.Android.bundle?platform=Android" -o "Android/app/src/main/assets/index.Android.bundle"

jetez un oeil à la réponse de kzzzf pour plus de détails.

androidreact-native
192
Matthew

Pour regrouper le fichier JS dans votre apk tout en faisant tourner votre serveur (react-native start), téléchargez le bundle dans le répertoire des ressources 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 allons corriger la commande react-native bundle afin qu'elle fonctionne avec les projets Android comme prévu.

106
kzzzf

Ce qui suit a fonctionné pour moi sur Ubuntu 14.04:

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

Mise à jour : Voir

Mise à jour 2 : @scgough Nous avons eu cette erreur car React Native (RN) n'a pas pu extraire le code JavaScript du serveur de développement sur lequel tourne le serveur 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/devsu

Si votre application RN détecte que vous utilisez Genymotion ou l'émulateur, elle tente d'extraire le code JavaScript à partir de GENYMOTION_LOCALHOST (10.0.3.2) ou de EMULATOR_LOCALHOST (10.0.2.2). Sinon, cela suppose que vous utilisez un appareil et essaie d'extraire le code JavaScript 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, et non sur celui du périphérique. Pour le faire fonctionner, vous devez donc:

87
dsissitka

Ok, je pense avoir compris quel est le problème ici. C'était en rapport avec la version de watchman que j'utilisais.

Dans un nouveau shell, exécutez brew update puis: brew unlink watchman puis: 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 de shell et lance: react-native run-Android à partir du dossier de mon projet. Tout est bien avec le monde.

ps. J'étais à l'origine sur la version 3.2 de Watchman. Cela m'a mis à niveau à 3.7.

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

* PLUS D'INFORMATIONS SUR LE FONCTIONNEMENT/LE DÉBOGAGE SUR UN PÉRIPHÉRIQUE *

Vous constaterez peut-être que si vous déployez votre application sur votre appareil Android plutôt que sur un émulateur, vous obtenez un écran rouge de la mort avec une erreur indiquant Unable to load JS Bundle. Vous devez configurer le serveur de débogage pour que votre périphérique soit sur votre ordinateur en fonctionnement réagit ... soit son nom OR adresse IP.

  1. Appuyez sur la touche de périphérique Menu
  2. Sélectionnez Dev Settings
  3. Sélectionnez Debug server Host for device
  4. Tapez l'adresse IP de votre machine et Reload JS plus le port de réaction, par ex. 192.168.1.10:8081

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

38
scgough

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)
16
Pēteris Caune

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 JS Bundle; redémarrez le serveur JS:

react-native start

Appuyez sur Reload JS sur l'émulateur. Cela a fonctionné pour moi. J'espère que ça va aider

13
Raphael_b

Dans l'application sur Android j'ai ouvert Menu (Commande + M dans Genymotion) -> Paramètres de développement -> Serveur de débogage Hôte et port pour le périphérique

définissez la valeur sur: localhost: 8081

Cela a fonctionné pour moi.

8
Daniel Masarin

Après avoir essayé une combinaison de réponses ici, voici 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 à partir de l'émulateur.

Ça charge!

Je peux maintenant commencer à développer.

6
ooolala

Supprimer l'application de votre téléphone! J'ai essayé plusieurs étapes, mais c'est ce qui a finalement été fait.

  1. Si vous avez essayé d'exécuter votre application auparavant mais que vous avez échoué, supprimez depuis votre appareil Android.
  2. Exécuter $ react-native run-Android
  3. Ouvrez le menu React Rage Shake à partir de votre application sur votre appareil Android, accédez à Dev Settings, puis à Debug server Host & port for device. Entrez ensuite l'adresse IP de votre serveur (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.
4
Andru

Je n'ai pas assez de réputation pour commenter, mais cela fait référence à la réponse de dsissitka. Cela fonctionne aussi 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
Sean Saito

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

1. Allez à la racine de votre application.

2. Exécutez cette commande.

bundle réactif natif --platform Android --dev false --index-fichier 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.

. Créer un APK signé.

Ouvrez le studio Android.

Construire> Générer un APK signé> [Remplir les détails requis, la frappe doit être générée avant cette étape]

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

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

génération de frappe:

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

  2. Courir

keytool -genkey -v -keystore d:\my_private_key.keystore -alias mon-clé-alias -keyalg RSA -keysize 2048 -validité 10000

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

2
Edison D'souza

Apparemment, adb reverse a été introduit dans Android 5.0.
Obtenir "erreur: fermé" deux fois sur "adb reverse"

Je suppose que nous devons aller de l'avant avec la réponse de Kzzzf

2
Nishanth Shankar

fonctionnant sur le périphérique

J'ai trouvé une autre réponse.

  • adb reverse: fonctionne uniquement sur Android 5.0+ (API 21).
  • Autre: ouvrez le menu Développeur en secouant le périphérique, accédez à Paramètres de développement , accédez à Hôte du serveur de débogage pour le périphérique , entrez l'adresse IP de votre machine et le port du développeur local serveur
1
Mike Nguyen

J'obtenais ceci sur Linux après avoir arrêté le processus react-native run-Android. Il semble que le serveur de nœud est toujours en cours d'exécution. Par conséquent, il ne s'exécutera pas correctement et votre application ne pourra pas se connecter.

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

Ensuite, exécutez à nouveau react-native run-Android.

1
Travis Reeder

Une mise à jour

Maintenant, sur Windows, plus besoin de lancer react-native start. Le conditionneur s'exécutera automatiquement.

1
Jagadish Upadhyay

Une chose importante à vérifier que personne n’a mentionnée jusqu’à présent: Vérifiez votre pare-feu local, assurez-vous qu’il est éteint .

Voir ma réponse ici: https://stackoverflow.com/a/41400708/1459275

1
niltoid

Vérifiez votre connexion wifi.

Une autre possibilité pourrait être que vous ne soyez pas connecté au wifi, connecté à un 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 réseau wifi et j'ai commencé à avoir cette erreur, sans le savoir.

1
Kelsey

Cette erreur peut être facilement résolue en procédant comme suit:

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

Dans la nouvelle React native (sûrement 0.59), la configuration de débogage est à l'intérieur de 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

Vous pouvez suivre les instructions mentionnées sur le page officielle pour résoudre ce problème. Ce problème se produit sur le périphérique réel car le bundle JS se trouve sur votre système de développement et que l'application de votre périphérique réel ne connaît pas son emplacement.

0
mthakuri

Démarrez les deux terminaux sur le même et le premier terminal réagit natif start et le deuxième terminal réagit natif run-Android, ce problème est résolu de manière simple. Et bonne chance

0
Chaurasia

La question initiale concernait le rechargement de l'application dans un périphérique physique.

Lorsque vous déboguez l'application dans un périphérique physique (c.-à-d. Via adb), vous pouvez recharger le bundle JS en cliquant sur le bouton "action" en haut à gauche de votre périphérique. Cela ouvrira le menu des options (Reload, Debug JS à distance ...).

J'espère que cela t'aides.

0
GuGuss

J'utilise Ubuntu et Android uniquement, et je n'ai pas réussi à le faire fonctionner. J'ai trouvé une solution très simple qui consiste à mettre à jour votre fichier package.json en modifiant les lignes suivantes:

"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 lancez le serveur en tapant

npm run start

Cela garantit que le périphérique Android recherche le serveur de nœud sur votre ordinateur plutôt que localement sur le téléphone.

0
IonicBurger