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

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.

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.

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

• Fonctionnement sur appareil (Android)
• Avertissement de périphérique supprimé?

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:

• Transférer le trafic depuis (l'hôte local de l'appareil): 8081 / tcp vers (l'hôte local de la station de travail): 8081 / tcp. C'est ce que fait cette commande adb.
• Dites à votre application RN où elle peut trouver votre serveur de développement.

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

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)

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

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.

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.

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.

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

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

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.

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.

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.

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

Une mise à jour

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

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

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

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.

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.

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

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.

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>

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

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.

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.

L'exécution de npm start à partir du répertoire react-native a fonctionné pour moi.