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


如何在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包。
我错过了什么吗?


27
2017-12-09 09:41


起源


您是否设法找到解决方案?我正在寻找类似的东西 - Srikanth Pai


答案:


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

  1. 当服务器启动时,打开与项目路径相同路径的下一个终端
  2. 复制并粘贴此命令: 在命令propmt中复制和粘贴命令之前,请在项目相应路径中创建assets文件夹
    如:
              Android设备/应用/ 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已准备好运行。

36
2018-06-22 10:40



这实际上按照完全按照描述的步骤打破了我的项目。 - Hobbyist
为我工作Thankx @Chiranjhivi - Abdul Karim
干杯:)快乐的编码 - Chiranjhivi Ghimire
不再需要 proandroiddev.com/... - onmyway133


你可以阅读的源代码 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包将包含在final apk中。

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

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

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

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

如果你跑 gradle assembleRelease 在命令行工具中,一切都很好,因为 Configure on demand 默认情况下禁用。


14
2018-05-21 07:22



谢谢你的提示 Configure on demand 在Android Studio中。这样做对我而言 - Muzikant
如果我禁用“按需配置”,我会得到 Execution failed for task ':app:recordFilesBeforeBundleCommandDebug'. > A problem occurred starting process 'command 'node'' 当我构建应用程序时。有没有其他人得到这个? - Sean
@AvatarQing你可以根据最近的风味尺寸变化更新这个更新的api ...我得到味道尺寸flavorDimensions'lite','new'和productFlavors foo&bar ...我怎样才能生成合适的bundleIn字符串? bundleIn ???? =真 - Sasuke Uchiha


您不必取消注释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配置文件中的路径,因此我可能找不到节点的路径。

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

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


6
2017-10-12 09:27





使用签名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)利润!


2
2018-03-14 23:28





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

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

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


1
2017-07-12 09:54



路径从哪里开始?它来自ReactApplication类的位置吗? - Mark O'Sullivan
对我来说,我使用绝对路径。到目前为止,它对我来说很好。 - Long Vu


当通过create-react-native-app创建一个未签名的apk来反应本机项目时,它没有index.android.js和index.ios.js .so首先你必须检查wheter 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。


0
2017-08-28 06:12