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

时间：2015-12-09 09:41:55

标签： android react-native

如何在android上使用离线捆绑包？
我没有看到关于在an​​droid上使用离线包的文档 我试图取消注释build.gradle中的代码。 

email

但它没有用。它仍然从服务器获取JS包 有没有我错过的东西？

7 个答案:

答案 0 :(得分：43)

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

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

  2. 复制并粘贴此命令： 在命令propmt中复制和粘贴命令之前，在项目各自的路径中创建资源文件夹
    如：
              机器人/应用/ SRC /主/资产

    在命令提示符中粘贴此命令并运行：

       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已准备好运行。

答案 1 :(得分：15)

您可以阅读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构建类型中启用，我们可以将react定义为：

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{}块中。

  

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

出于某些不明原因，启用gradle.projectsEvaluated{}功能时，Configure on demand块中定义的任何任务都不会执行。要使其可执行，请在Android工作室设置中停用Configure on demand功能，或将gradle.projectsEvaluated{}更改为afterEvaluate{}。

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

答案 2 :(得分：7)

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

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

要在Android Studio中进行修复，请转到Preferences > Build, Execution, Deployment > Build Tools > Compiler并取消选中"Configure on demand"。

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

默认情况下，调试变量不会生成包：bundleInDebug : false

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

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

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

I posted a solution to that issue here

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

答案 3 :(得分：4)

当通过没有index.android.js和index.ios.js的create-react-native-app从react本机项目构建未签名的apk时，首先必须检查一下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。

答案 4 :(得分：2)

您可以在ReactApplication类中覆盖getJSBundleFile（）函数以返回自定义文件路径。

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

之后，只需使用react-native bundle生成捆绑包，然后将生成捆绑包放入设备的指定路径中。

答案 5 :(得分：1)

使用签名APK发布。

我尝试使用未签名的APK文件并进行安装，但是当我在Android平板电脑上安装它时，它给了我Failure [INSTALL_PARSE_FAILED_NO_CERTIFICATES]的错误。

我想这是因为APK文件没有签名而平板电脑对此不满意。因此，在生成React Native捆绑文件后，我能够通过Android Studio正常生成签名的APK文件。

顺便说一句，我们的应用程序是一个功能齐全的Android应用程序，已经存在于Play商店中，我们只是以一口大小的形式添加React Native，因为它很棒。

总而言之，这是我的步骤：

1）生成React Native包： 

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）从Android Studio生成已签名的APK文件。

3）将已签名的APK文件安装到USB设备： 

adb -d install -r <path_to_signed_apk>

4）利润！

答案 6 :(得分：0)

我们需要在android->app->src->main目录下创建assets目录。并运行以下命令

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

对于 Windows 平台，运行以下命令

npx  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\
相关问题
最新问题