Impossible de charger le script à partir des actifs index.android.bundle sur Windows

J'essaie d'exécuter mon premier projet React Native pour la première fois sur mon appareil (Android 4.2.2).

Et je reçois:

impossible de charger le script à partir des actifs index.android.bundle

Commandes que j'ai utilisées:

1. cd (project directory)
2. react-native start
3. react-native run-android

J'ai rencontré le même problème en suivant le didacticiel React Native (développement sous Linux et ciblage Android).

Ce problème m'a aidé à résoudre le problème en suivant les étapes.

1. (dans le répertoire du projet) mkdir android/app/src/main/assets
2. react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
3. react-native run-android

Vous pouvez automatiser les étapes ci-dessus en les plaçant en scriptspartie package.jsoncomme ceci:

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

Ensuite, vous pouvez simplement exécuter à npm run android-linuxpartir de votre ligne de commande à chaque fois.

Si vous exécutez votre application sur un périphérique physique et obtenez cette erreur

unable to load script from assets index.android.bundle

essayez d'exécuter la commande:

adb reverse tcp:8081 tcp:8081

Cela a fonctionné pour moi ...

J'ai passé des heures à essayer de comprendre ce problème. Mon problème n'était pas spécifique à Windows mais est spécifique à Android.

L'accès au serveur de développement a fonctionné localement et dans le navigateur de l'émulateur. La seule chose qui n'a pas fonctionné était d'accéder au serveur de développement dans l'application.

À partir d'Android 9.0 (API niveau 28), la prise en charge du texte en clair est désactivée par défaut.

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest ...>
    <uses-permission android:name="android.permission.INTERNET" />
    <application
        ...
        android:usesCleartextTraffic="true"
        ...>
        ...
    </application>
</manifest>

Voir pour plus d'informations: https://stackoverflow.com/a/50834600/1713216

Utilisation de npm version 4.3.0 react-native-cli version 2.01 react-native version 0.49.5

Dans le répertoire du projet,

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

Le nom du fichier est passé de index.android.js à index.js

J'ai rencontré le même problème avec un véritable appareil Android.

Solution: Basé sur cette réponse de Niltoid

1. Trouvez votre IP locale
2. Ouvrez l'application et secouez votre appareil Android
3. Allez Dev Setting et> Debug Server ...
4. Collez votre IP et votre port; XXXX: 8088 "(où les X sont votre adresse IP locale)

pour les utilisateurs de Mac: ouvrez votre préférence de réseau, ici vous obtiendrez votre IP locale.

Si vous utilisez Windows, exécutez les commandes de la manière suivante, ou si vous obtenez une erreur "Impossible de trouver le fichier d'entrée index.android.js"

1. mkdir android\app\src\main\assets

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

3. 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 est situé 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.

Eu le même problème dans mac, Après avoir passé 2 jours, j'ai finalement réussi à travailler.

Depuis Emulator cellular data was turned off, je recevais le unable to load script from assets index.android.bundle make sure your bundle is running.

Assurez-vous Emulator cellular data is turned onqu'en effectuant ce package, le serveur a pu être groupé index.android.js. J'espère que ça aide pour quelqu'un qui est en phase de développement.

J'ai ce même problème depuis plusieurs mois maintenant. J'ai d'abord utilisé la solution de @ Jerry, cependant, c'était une fausse résolution car elle n'a pas complètement résolu le problème. Au lieu de cela, ce qu'il a fait, c'est de prendre chaque build comme un build de production, ce qui signifie que toute légère modification que vous avez apportée à l'application signifierait que la reconstruction de l'application entière est nécessaire.

Bien qu'il s'agisse d'une solution temporelle, elle fonctionne horriblement à long terme car vous ne pouvez plus bénéficier des incroyables outils de développement de React Native tels que le rechargement à chaud, etc.

Une solution appropriée est illustrée:

Dans votre MainApplication.javafichier, remplacez les éléments suivants:

@Override
public boolean getUseDeveloperSupport() {
    return BuildConfig.DEBUG;
}

avec

@Override
public boolean getUseDeveloperSupport() {
    return true;
}

comme pour une raison quelconque BuildConfig.DEBUG toujours retourné faux et a abouti à un fichier bundle dans le répertoire des actifs.

En définissant manuellement cette valeur sur true, vous forcez l'application à utiliser le packager. Cela ne fonctionnera pas en production, assurez-vous donc de le remplacer par false ou par défaut.

N'oubliez pas aussi de courir

$ adb reverse tcp:8081 tcp:8081

1 Accédez au répertoire de votre projet et vérifiez si ce dossier existe android/app/src/main/assets

1. Si elle existe alors supprimer deux fichiers savoir index.android.bundleetindex.android.bundle.meta
2. Si les actifs du dossier n'existent pas, créez-y le répertoire des actifs.

2.Depuis votre répertoire racine de projet,

cd android && ./gradlew clean

3.Enfin, revenez au répertoire racine et vérifiez s'il existe un seul fichier d'entrée appeléindex.js

• S'il n'y a qu'un seul fichier, par exemple index.js, exécutez la commande suivante react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

• S'il y a deux fichiers, à savoir index.android.js et index.ios.js, exécutez ce 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

  4. Maintenant, lancez react-native run-android

OS: Windows

Une autre façon de résoudre ce problème après avoir essayé les deux méthodes ci-dessus
(car j'ai installé le SDK pas dans DEFAULT LOCATION comme C: \ users \ "user_name" \ appdata \ local \ sdk )

Si vous avez remarqué que la ligne de commande annonçait: "'adb' n'est pas reconnu comme une commande interne ou externe ..."

Voici donc comment je m'en
remets : Exemples: j'ai installé le SDK dans D: \ Android \ sdk
Donc je vais insérer un chemin dans les variables système 2 lignes supplémentaires:

D:\Android\sdk\tools  
D:\Android\sdk\platform-tools  

(Si vous ne savez pas comment modifier les variables système de chemin, voici le sujet: /android/38321/what-do-i-type-in-path-variable-for-adb- serveur pour démarrer à partir de cmd / 38324 )

Ensuite, je lance à nouveau cmd: react-native run-android

Ça a marché pour moi.

Dans mon cas, j'ai supprimé la ligne ci-dessous de MainApplication.java. (Ce que j'ai ajouté par erreur auparavant.) : -

import com.facebook.react.BuildConfig;

Après ce Clean Project et appuyez sur la commande

réagir-natif run-android

Pour IOS:

Dans un terminal:

cd ios

Supprimez le dossier de génération avec: rm -r build

Réexécutez: react-native run-ios

Vous pouvez également ouvrir le Finder, accéder à YOUR_PROJECT / ios et supprimer le dossier de génération .

Puis exécutez à nouveau: react-native run-ios

Pour ANDROID:

Dans un terminal:

cd android/app

Supprimez le dossier de génération avec: rm -r build

Réexécutez: react-native run-android

Vous pouvez également ouvrir le Finder, accéder à YOUR_PROJECT / android / app et supprimer le dossier de génération .

Puis exécutez à nouveau: react-native run-android

Pour ce problème, je le résous simplement en exécutant:

react-native start

puis

adb reverse tcp:8081 tcp:8081

sur la ligne de commande. Et puis je peux courir:

react-native run-android

Je ne perdrai donc pas mon temps à courir:

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

à chaque fois.

J'étais également confronté à ce problème parce que lorsque j'exécute des projets sur l'émulateur, cela fonctionne bien, mais sur un appareil réel, il donne cette erreur. Je résous donc ce problème par la solution suivante

1ère étape: ouvrez d'abord cmd et allez dans votre dossier Platform-tools du gestionnaire SDK

cd C:Development\Android\Sdk\Platform-tools

2ème étape : exécutez maintenant cette commande:

adb devices

après cette commande, vérifiez votre appareil répertorié dans l'invite de commande

3e étape : exécutez maintenant cette

adb reverse tcp:8081 tcp:8081

Maintenant, votre configuration est terminée

4ème étape : accédez au répertoire de votre projet et exécutez cette commande

react-native run-android

Ubuntu

la première fois, j'ai créé une nouvelle application avec react-native init project-name. J'ai eu la même erreur. donc je fais les étapes suivantes pour résoudre ce problème dans mon cas.

1. Tout d'abord exécuter sudo chown user-name-of-pc /dev/kvmdans mon cas.

2. Lors du débogage depuis votre téléphone Android, sélectionnez Use USB to Transfer photos (PTP).

3. Créer un dossier assetsdans project-name / android / app / src / main

4. assurez-vous d' index.jsêtre disponible dans le root répertoire de votre projet , puis exécutez la commande ci-dessous à partir de la console après le cd project-namerépertoire.

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

ou pour index.android.js puis

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

5. exécuter la commande ./studio.shdans le android-studio/binrépertoire. Cela ouvrira Android Studio.

6. exécuter la commande react-native run-android.

Assurez-vous que Metro Builder est en cours d'exécution pour synchroniser votre appareil physique et votre serveur

Tout d'abord, exécutez cette commande pour exécuter Metro Builder

npm start

Ensuite, vous pouvez démarrer la construction en réagissant natif

réagir-natif run-android

Leur devrait être sans erreur cette fois. Si vous voulez que votre code soit rechargé en direct lors du changement. Secouez votre appareil, puis appuyez sur Activer le rechargement en direct

Assurez-vous d'avoir ajouté / path / to / sdk / platform-tools à votre variable path.

Lorsque vous exécutez react-native run-android, il exécute la commande adb reverse tcp: <device-port> tcp: <local-port> pour transmettre la demande de votre appareil au serveur s'exécutant localement sur votre ordinateur. Vous verrez quelque chose comme ça si adb n'est pas trouvé.

/bin/sh: 1: adb: not found
Starting the app (.../platform-tools/adb shell am start -n 
com.first_app/com.first_app.MainActivity...
Starting: Intent { cmp=com.first_app/.MainActivity }

Cela peut être dû à des actifs non liés dans votre base de code de projet React Native, comme lorsque vous renommez votre application de projet / ID de bundle ou ajoutez un package externe sans le lier correctement, par exemple.

Essayez-le simplement dans le répertoire racine de votre projet:

react-native link

react-native run-android

Si lors de l'exécution de la react-native run-androidcommande, la deuxième ligne de la trace est

JS server not recognized, continuing with build...

cela signifie que le packager de l'application ne peut pas être démarré et que l'application ne se chargera pas sans quelques étapes supplémentaires. Notez que la fin de la trace signale toujours le succès:

BUILD SUCCESSFUL

Le problème est probablement un conflit de port (dans mon cas, c'était le site IIS par défaut que j'avais complètement oublié). Une autre manifestation du problème serait l'échec de l'ouverture de l' http://localhost:8081/debugger-uiURL dans Chrome.

Une fois le conflit de port résolu, la trace signalera

Starting JS server...

puis une fenêtre Node supplémentaire s'ouvrira ( node ...cli.js start) et l'application se chargera / se rechargera avec succès.

Après cela, vous devriez pouvoir ouvrir la console de débogage dans Chrome avec http://localhost:8081/debugger-ui.

J'ai eu le même problème même lors de l'exécution sur un simulateur. J'ai fait une solution rapide pour que je puisse avoir le flux de travail de développement normal.

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
  @Override
  public boolean getUseDeveloperSupport() {
    // return true here to load JS from the packager
    // BuildConfig.DEBUG for me was set to false which meant it
    // it was always trying to load the assets from assets folder.
    return true;
  }

  @Override
  protected String getJSMainModuleName() {
    return "index";
  }
};

Il faudra probablement annuler le changement lorsque vous tenterez de faire une génération de production.

J'ai eu un problème avec McAfee sur mon port de blocage de mac 8081, j'ai dû le changer en 8082.

Exécutez d'abord votre serveur de packages:

react-native start --port 8082

Ouvrez un autre terminal, lancez l'application Android comme d'habitude:

react-native run-android

Une fois terminé, réécrivez maintenant le port TCP qui adb tunnels:

adb reverse tcp:8081 tcp:8082

Voir la liste des tunnels adb tcp:

adb reverse --list

Vous devriez maintenant voir un message réconfortant:

(reverse) tcp:8081 tcp:8082

Accédez à votre application et rechargez, c'est fait!

PS: Ne changez rien dans les paramètres de l'application Dev, si vous avez ajouté "localhost: 8082", supprimez-le, laissez-le vide.

EDIT: Pour toutes les victimes de McAfee, il existe une solution plus simple si vous avez un accès root, il suffit de tuer temporairement le processus McAfee assis sur le port 8081 et pas besoin de changer de port:

sudo launchctl remove com.mcafee.agent.macmn

Je pense que tu n'as pas de laine installé, essayez de l'installer avec du chocolat ou quelque chose. Il doit être installé avant de créer votre projet (commande init native-react).

Pas besoin de créer de répertoire d'actifs.

Répondez si cela ne fonctionne pas.

Edit: Dans la version récente de react-native, ils l'ont corrigé. Si vous voulez une liberté totale de ce nœud, désinstallez simplement (pour une désinstallation complète Supprimez complètement le nœud, référez-vous à ce lien) et réinstallez le nœud, react-native-cli puis créez votre nouveau projet.

n'oubliez pas d'activer Internet dans le dispositif émulateur, j'ai résolu cette erreur, cela fonctionne parfaitement: V Je reçois cette erreur car je désactive Internet pour tester NetInfo: D

Il s'agit d'un message d'erreur général que vous avez pu rencontrer lors du développement de l'application native React. Donc, dans ce tutoriel, nous allons fournir une solution à ce problème.

Description du problème: impossible de charger le script à partir des actifs index.android.bundle sous Windows Impossible de charger le script à partir des actifs index.android.bundle sous Windows

Suivez les étapes ci-dessous pour résoudre le problème ci-dessus:

Étape 1: Créez le dossier "assets" dans le répertoire de votre projet Créez maintenant le dossier assets dans le répertoire du projet qui est "MobileApp \ android \ app \ src \ main". Vous pouvez créer manuellement le dossier des ressources:

<OU>

vous pouvez également créer un dossier en utilisant la commande. Commande: mkdir android / app / src / main / assets

Étape 2: Exécution de votre application native React Permet d'exécuter la commande ci-dessous pour exécuter l'application native React dans l'émulateur ou le périphérique physique.

Basculez vers le répertoire du projet. cd MobileApp

Exécutez la commande ci-dessous qui vous aide à regrouper votre projet d'application Android.

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

Exécutez l'étape finale pour exécuter l'application native React dans l'émulateur ou le périphérique physique. réagir-natif run-android

<OU>

Vous pouvez également combiner les deux dernières commandes en une seule. Dans ce cas, vous ne devez exécuter la commande qu'une seule fois.

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

<OU>

Vous pouvez automatiser les étapes ci-dessus en les plaçant dans des scripts faisant partie de package.json comme ceci:

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

Si tout est correctement configuré, vous devriez voir votre nouvelle application s'exécuter sous peu dans votre émulateur Android.

Suivez cela, a travaillé pour moi.

https://github.com/react-community/lottie-react-native/issues/269

Accédez à votre répertoire de projet et vérifiez si ce dossier existe android / app / src / main / assets i) S'il existe, supprimez deux fichiers à savoir index.android.bundle et index.android.bundle.meta ii) Si les actifs du dossier ne n'existe pas alors créez le répertoire des actifs là-bas.

Depuis votre répertoire de projet racine, faites un cd android && ./gradlew clean

Enfin, revenez au répertoire racine et vérifiez s'il n'y a qu'un seul fichier d'entrée appelé index.js i) S'il n'y a qu'un seul fichier, c'est-à-dire index.js, exécutez ensuite la commande react-native bundle --platform android --dev false - -entry-file index.js --bundle-output android / app / src / main / assets / index.android.bundle --assets-dest android / app / src / main / res

ii) S'il existe deux fichiers, à savoir index.android.js et index.ios.js, exécutez ce bundle réactif natif --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

Maintenant, lancez run-android react-native

Je viens de rencontrer exactement le même problème et de le résoudre. J'espère donc être utile.

Supposons que vous assembliez un package d'application de version (.apk)

1. Vérifiez si votre dossier d'actifs existe?: \ Android \ app \ src \ main \ assets Sinon, créez-en un.

2. Après avoir exécuté "Assemble Release", vérifiez s'il y a quelque chose dans ce dossier (\ android \ app \ src \ main \ assets) Sinon, recherchez le fichier de bundle js ( index.android.bundle ), qui devrait se trouver dans plusieurs des les chemins suivants:

   * a) \ android \ app \ build \ intermediates \ merged_assets \ release \ out \ index.android.bundle

   b) \ android \ app \ build \ intermediates \ merged_assets \ release \ mergeReleaseAssets \ out \ index.android.bundle

   c) \ android \ app \ build \ intermediates \ assets \ release \ index.android.bundle

   d) \ android \ app \ build \ généré \ assets \ react \ release \ index.android.bundle *

Une meilleure façon est d'utiliser "Tout" pour rechercher le nom du fichier: index.android.bundle.

3. Copiez ensuite ce fichier dans votre dossier d'actifs (\ android \ app \ src \ main \ assets \ index.android.bundle)

4. Revenez à PowerShell ou à la console de commande, exécutez:

react-native run-android --variant = release

Ça devrait marcher.

Bonne chance!

lorsque je mets à jour react-native vers 0.49.5, ce problème apparaît et lorsque j'ai suivi ce Breaking changes and deprecations

c'est disparu.

Je suis confronté à ce problème, beaucoup de recherches et j'ai résolu ce problème.

c:\ProjectFolder\ProjectName> react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

Ensuite, exécutez le natif React:

c:\ProjectFolder\ProjectName>react-native run-android

Pour tous les gars qui développent à partir d'une application create-react-native et éjectés, et qui ont ce problème development, c'est ce qui a fonctionné pour moi juste un petit détail de la réponse acceptée

(dans le répertoire du projet) mkdir android / app / src / main / assets

voici la partie qui change car vous êtes en développement, débarrassez-vous de la --dev: falsepartie:

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

après cela, fermez tous les terminaux, effacez le dossier de construction d'Android / app / pour vous assurer que vous commencez à nettoyer pour créer votre application, ouvrez un nouveau terminal et

(dans le répertoire du projet) npm run android

invitera la console du packager (dans un autre terminal) et construira avec succès