如何在android上使用离线包来反应原生项目？

Question

如何在android上使用离线捆绑？
我没有在android上看到关于使用offline bundle的文档.
我试图取消注释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/**"]
]

但它没有用.它仍然从服务器获取JS包.
我错过了什么吗？

Answer 1

要将JS脱机捆绑到android中,首先在各自的项目路径中启动服务器:

1. 当服务器启动时,打开与项目路径相同路径的下一个终端

2. 复制并粘贴此命令:在命令propmt中复制并粘贴命令之前,将项目相应路径中的assets文件夹设置
   为:
   android/app/src/main/assets

   在命令提示符下粘贴此命令并运行:

      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. 然后在assets文件夹中将出现文件index.android.bundle

4. 最后,运行命令:react-native run-android(同时构建新的离线apk,你不需要启动服务器,你的离线js文件将帮助你构建apk文件.)
5. 最后,apk现在构建已准备好在不同设备中运行(从app/src/build/debug.apk运行apk).
6. 有时新制作的apk将在没有显示图像的情况下运行,如果应用程序运行时没有图像,则将特定图像资源文件夹复制并粘贴到android/app/src/main/assets /(图像源文件夹)
7. 再次重新运行应用程序,因此构建apk已准备好运行.

Answer 2

您可以阅读源代码react.gradle,然后您将了解如何执行脱机捆绑.

在react.gradle,它为每个构建变量创建离线束gradle任务,并使其在gradle进程资源之前执行,但它在一些特殊条件下启用bundle任务,代码为:

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

而对象实际上config是react对象的定义 def config = project.hasProperty("react") ? project.react : [];

而targetName定义是def targetName = "${productFlavorName.capitalize()}${buildTypeName.capitalize()}"

因此,如果我们定义了适当的react属性app\build.gradle,我们可以启用脱机捆绑任务.

例如,如果我们想要在release构建类型中启用离线束而不在debug构建类型中启用,我们可以将reactas 定义为:

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

然后gradle assembleRelease在命令行执行,gradle将执行bundle任务,js包将包含在最终的apk中.

现在在您的问题中,您已经定义了正确的react对象,但是您没有提到您运行的构建类型.只有执行gradle assembleRelease可以执行捆绑作业,也许你执行gradle assembleDebug所以它没有任何意义.

还有一个我需要说的问题(另见issue7258).如果您为发布版本类型启用了捆绑任务并从android studio运行应用程序,则gradle不会执行bundleReleaseJsAndAssets,因为android studio Configure on demand默认启用该功能(它在文件|设置|构建,执行,部署|编译器中)以加速构建react.gradle当所有项目都配置(或称为已评估)时,由于主代码在gradle.projectsEvaluated{}块中,所以在bundle任务中添加到项目中.

按需配置模式尝试仅配置与请求的任务相关的项目,即它仅执行参与构建的项目的build.gradle文件.

由于某些不明原因,gradle.projectsEvaluated{}启用该Configure on demand功能时,在块中定义的任何任务都不会执行.要使其可执行,请Configure on demand在android studio设置中禁用该功能,或更改gradle.projectsEvaluated{}为afterEvaluate{}.

如果您gradle assembleRelease在命令行工具中运行,一切正常,因为Configure on demand默认情况下已禁用.

Answer 3

您不必在gradle.build文件中取消注释任何内容.它可供参考,如果需要,您可以覆盖任何默认值.

问题是Android Studio没有运行负责生成捆绑的任务.

要在Android Studio中修复此问题,请转到Preferences > Build, Execution, Deployment > Build Tools > Compiler并取消选中"Configure on demand".

现在,您标记为需要捆绑包的任何变体都将自动生成捆绑包.

默认情况下,debug variant不会生成包: bundleInDebug : false

你可以这样改变.在这里,我还提供了如何更改入口点的默认位置和捆绑包的默认名称的示例.

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

一旦进行了这些调整,您仍然可能会陷入问题构建,因为Studio无法识别您的shell配置文件中的路径,因此我可能找不到节点的路径.

我在这里发布了一个解决方案

这是一个稳定而强大的解决方案.在环境中进行这些更改后,您无需手动执行任何操作.当您按下IDE中的按钮时,将自动构建Bundle,允许您选择正确的构建变体(也在Studio窗口的LHS栏上的IDE中朝向底部).

Answer 4

当通过 create-react-native-app 从 react native 项目构建未签名的 apk 时，它没有 index.android.js 和 index.ios.js 。所以首先你必须检查 index.js 文件是否在那里您的项目。如果它不可用，则创建一个新文件 index.js 并在那里编写此代码

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

在此之后弹出项目，然后运行此命令

  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它会为你构建一个apk。