web-dev-qa-db-fra.com

Comment utiliser le bundle hors connexion sur Android pour réagir au projet natif?

Comment utiliser bundle hors ligne sur Android?
Je n'ai pas vu le document sur l'utilisation du bundle hors ligne sur Android.
J'ai essayé de décommenter le code dans build.gradle.

project.ext.react = [
        // the name of the generated asset file containing your JS bundle
    bundleAssetName: "index.Android.bundle",

    // the entry file for bundle generation
    entryFile: "index.Android.js",

    // whether to bundle JS and assets in debug mode
    bundleInDebug: false,

    // whether to bundle JS and assets in release mode
    bundleInRelease: true,

    // the root of your project, i.e. where "package.json" lives
    root: "../../",

    // where to put the JS bundle asset in debug mode
    jsBundleDirDebug: "$buildDir/intermediates/assets/debug",

    // where to put the JS bundle asset in release mode
    jsBundleDirRelease: "$buildDir/intermediates/assets/release",

    // where to put drawable resources / React Native assets, e.g. the ones you use via
    // require('./image.png')), in debug mode
    resourcesDirDebug: "$buildDir/intermediates/res/merged/debug",

    // where to put drawable resources / React Native assets, e.g. the ones you use via
    // require('./image.png')), in release mode
    resourcesDirRelease: "$buildDir/intermediates/res/merged/release",

    // by default the gradle tasks are skipped if none of the JS files or assets change; this means
    // that we don't look at files in Android/ or ios/ to determine whether the tasks are up to
    // date; if you have any other folders that you want to ignore for performance reasons (gradle
    // indexes the entire tree), add them here. Alternatively, if you have JS files in Android/
    // for example, you might want to remove it from here.
    inputExcludes: ["Android/**", "ios/**"]
]

mais cela n'a pas fonctionné. Il récupère toujours le paquet JS du serveur.
Y a-t-il quelque chose que j'ai raté?

androidreact-native
39
magicismight

Pour regrouper hors connexion JS dans Android, démarrez d’abord le serveur dans le chemin de projet correspondant:

  1. au démarrage du serveur, ouvrez le terminal suivant avec le même chemin que le chemin du projet

  2. copier et coller cette commande: Avant de copier et coller une commande dans la commande propmt, créez un dossier d’actifs dans le chemin respectif du projet.
    comme:
    Android/app/src/main/assets

    collez cette commande dans la commande Invite et exécutez:

       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/

  3. Ensuite, dans le dossier assets, le fichier index.Android.bundle apparaîtra.

  4. Enfin, exécutez la commande: react-native run-Android (lors de la création d’un nouvel apk hors connexion, vous n’avez pas besoin de démarrer le serveur, votre fichier js hors connexion vous aidera à créer un fichier apk.)
  5. Final, apk now build est prêt à fonctionner sur différents appareils (exécutez apk à partir de app/src/build/debug.apk).
  6. Parfois, une apk récemment créée sera exécutée sans afficher les images. Si l'application s'exécute sans image, copiez-collez le dossier de ressources de l'image spécifique dans Android/app/src/main/assets/(dossier source de l'image).
  7. Encore une fois, relancez l'application et construisez donc apk est prêt à fonctionner.
45
Chiranjhivi Ghimire

Vous pouvez lire le code source de react.gradle, Vous saurez alors comment faire le bundle hors ligne.

Dans react.gradle, Il crée une tâche de dégradé de bundle hors ligne pour chaque variante de construction et l'exécute avant les ressources du processus de dégradé. Toutefois, il active la tâche de bundle dans certaines conditions spéciales. Le code est le suivant:

enabled config."bundleIn${targetName}" ||
        config."bundleIn${buildTypeName.capitalize()}" ?:
        targetName.toLowerCase().contains("release")

tandis que l’objet config est l’objet react comme sa définition est def config = project.hasProperty("react") ? project.react : [];

et la définition de targetName est def targetName = "${productFlavorName.capitalize()}${buildTypeName.capitalize()}"

Donc, si nous définissons une propriété react appropriée dans app\build.gradle, Nous pouvons activer la tâche de regroupement hors connexion.

Par exemple, si nous voulons activer le bundle hors ligne dans le type de construction release mais pas dans le type de construction debug, nous pouvons définir le react comme suit:

ext.react = [
    bundleInDebug     : false,
    bundleInRelease   : true
]

puis exécutez gradle assembleRelease en ligne de commande, gradle exécutera la tâche relative au paquet et le paquet js sera inclus dans l'apk final.

Dans votre question, vous avez défini le bon objet react, mais vous ne précisez pas quel type de construction vous avez exécuté. Seulement exécuter gradle assembleRelease Peut faire le travail d'ensemble, peut-être que vous avez exécuté gradle assembleDebug, Donc cela n'a aucun sens.

Et il y a encore un autre problème que je dois dire (voir aussi dans issue7258 ). Si vous avez activé la tâche de regroupement pour le type de version de la version et que vous avez exécuté l'application à partir de Android studio, le dégradé ne s'exécute pas bundleReleaseJsAndAssets, car Android studio activer la fonctionnalité Configure on demand (c'est dans Fichier | Paramètres | Construire, Exécution, Déploiement | Compilateur) par défaut pour accélérer la construction, et dans react.gradle la tâche d'ensemble est ajoutée au projet lorsque tous les projets le sont configuré (ou appelé évalué) car le code principal est dans le bloc gradle.projectsEvaluated{}.

Le mode Configuration à la demande tente de configurer uniquement les projets pertinents pour les tâches demandées, c’est-à-dire qu’il n’exécute que le fichier build.gradle des projets participant à la construction.

Pour des raisons obscures, toute tâche définie dans le bloc gradle.projectsEvaluated{} Ne s'exécute pas lors de l'activation de la fonction Configure on demand. Pour le rendre exécutable, désactivez la fonction Configure on demand Dans Android, ou modifiez gradle.projectsEvaluated{} En afterEvaluate{}.

Si vous exécutez gradle assembleRelease Dans l'outil de ligne de commande, tout va bien car Configure on demand Est désactivé par défaut.

16
AvatarQing

Vous ne devez rien commenter dans votre fichier gradle.build. Il est là pour référence et vous pouvez écraser toutes les valeurs par défaut si vous en avez besoin.

Le problème est que Android Studio n’exécute pas la tâche chargée de générer l’ensemble.

Pour résoudre ce problème dans Android Studio, accédez à Preferences > Build, Execution, Deployment > Build Tools > Compiler et décochez "Configure on demand".

Désormais, toute variante que vous indiquez comme nécessitant un regroupement, le regroupement est généré automatiquement.

Par défaut, la variante de débogage ne fait pas générer le paquet: bundleInDebug : false

Vous pouvez changer ça comme ça. Ici, j’ai également fourni un exemple de modification de l’emplacement par défaut du point d’entrée et du nom par défaut de l’ensemble.

project.ext.react = [
    bundleAssetName: "index.myapp.bundle",
    entryFile: "js/index.myapp.js",
    bundleInDebug: true
]

Une fois que vous avez effectué ces ajustements, vous pouvez toujours vous préoccuper de la création de problèmes, car Studio ne reconnaît pas les chemins de vos profils Shell. Il est donc possible que je ne trouve pas le chemin du noeud.

J'ai posté une solution à ce problème ici

C'est une solution stable et robuste. Vous n'avez rien à faire manuellement une fois que vous avez apporté ces modifications à votre env. Bundle sera construit automatiquement lorsque vous appuierez sur les boutons de votre IDE, ce qui vous permettra de sélectionner les variantes de construction appropriées (également dans IDE sur la barre LHS de la fenêtre Studio vers le bas).

7
Moonwalker

Lors de la construction d'un apk non signé à partir d'un projet natif réagi via create-react-native-app qui n'a pas index.Android.js et index.ios.js. votre projet .si il n'est pas disponible, créez un nouveau fichier index.js et écrivez-y le code

import { AppRegistry } from "react-native";
import App from "./App";
AppRegistry.registerComponent("VOS", () => App);

après cela éjecte le projet puis lance cette 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/

et alors react-native run-Android donc il va construire un apk pour vous.

4
Mudassir Khan

Vous pouvez remplacer la fonction getJSBundleFile () dans votre classe ReactApplication pour renvoyer un chemin de fichier personnalisé.

@Nullable
    @Override
    protected String getJSBundleFile() {
        return "/your/bundle/path/bundle.file.name.bundle";
    }

Après cela, générez simplement le paquet en utilisant react-native bundle, placez le paquet généré dans le chemin spécifié sur votre périphérique.

2
Long Vu

Pour publication avec un APK signé.

J'ai essayé d'utiliser un fichier APK non signé et de l'installer, mais lorsque je suis allé l'installer sur ma tablette Android, cela m'a donné une erreur de Failure [INSTALL_PARSE_FAILED_NO_CERTIFICATES].

J'imagine que c'est parce que le fichier APK n'a pas été signé et que la tablette n'en est pas satisfaite. Ainsi, après avoir généré le fichier de bundle natif React, j'ai pu générer un fichier APK signé, comme d'habitude, via Android Studio.

Au fait, notre application est une application Android entièrement fonctionnelle qui existe déjà dans le Play Store et nous ajoutons simplement React au format natif, car elle c'est génial.

Donc, pour résumer, voici mes étapes:

1) Générer React Bundle natif:

react-native bundle --platform Android --dev false --entry-file index.Android.js --bundle-output Android/<your-package-name>/src/main/assets/index.Android.bu‌​ndle --assets-dest Android/<your-package-name>/src/main/res/

2) Générez un fichier APK signé à partir de Android Studio.

3) Installer le fichier APK signé sur un périphérique USB:

adb -d install -r <path_to_signed_apk>

4) Bénéfice !

1
Joshua Pinter