如何在android上使用react原生项目的离线捆绑包?

fae0ux8s  于 2023-02-05  发布在  React
关注(0)|答案(7)|浏览(216)

如何在android上使用离线捆绑包?
我没有看到关于在Android上使用离线捆绑包的文档。
我尝试取消注解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包。
我错过什么了吗?

pw136qt2

pw136qt21#

对于离线捆绑JS到android,首先在各自的项目路径中启动服务器:
1.当服务器启动时,打开下一个终端,路径与项目路径相同
1.复制并粘贴此命令:在命令提示中复制和粘贴命令之前,请将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/

1.然后在资产文件夹中会出现文件为index. android. bundle
1.最后,运行命令:react-native run-android(在新建离线apk的时候你不需要启动服务器,你的离线js文件会帮助你建立apk文件)
1.最后,APK现在构建可以在不同的设备上运行(从app/src/build/debug. apk运行APK)。
1.有时新制作的APK将运行而不显示图像,如果应用程序运行时没有图像,然后复制并粘贴到Android/app/src/main/assets/(图像源文件夹)的特定图像资源文件夹
1.再次重新运行应用程序,从而构建apk准备运行。

qco9c6ql

qco9c6ql2#

您可以阅读react.gradle的源代码,然后您就会知道如何进行离线捆绑。
react.gradle中,它为每个构建变体创建离线捆绑包gradle任务,并使其在gradle进程资源之前执行,但在某些特殊情况下启用捆绑包任务,代码为:

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()}"
因此,如果我们在app\build.gradle中定义一个正确的react属性,就可以启用离线绑定任务。
例如,如果我们想在release构建类型中启用离线捆绑包,但不想在debug构建类型中启用,则可以将react定义为:

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

然后在命令行中执行gradle assembleRelease,gradle将执行捆绑包任务,js捆绑包将包含在最终apk中。
现在在你的问题中,你已经定义了正确的react对象,但是你没有提到你运行了哪种构建类型。只有execute gradle assembleRelease可以完成捆绑工作,也许你执行了gradle assembleDebug,所以它没有任何意义。
还有一个问题我需要说明(另请参见issue7258)。如果您启用了发布构建类型的捆绑包任务并从android studio运行应用,gradle不会执行bundleReleaseJsAndAssets,因为android studio启用了Configure on demand功能(位于文件中|设置|构建、执行、部署|编译器),用于加速构建,在react.gradle中,当所有项目都已配置(或调用已评估)时,捆绑任务将添加到项目中,因为主代码位于gradle.projectsEvaluated{}块中。
按需配置模式尝试仅配置与所请求任务相关的项目,即仅执行参与构建的项目的build. gradle文件。
由于一些不清楚的原因,当启用Configure on demand功能时,gradle.projectsEvaluated{}块中定义的任何任务都不会执行。要使其可执行,请在android studio设置中禁用Configure on demand功能,或将gradle.projectsEvaluated{}更改为afterEvaluate{}
如果您在命令行工具中运行gradle assembleRelease,一切正常,因为Configure on demand默认为禁用。

cidc1ykv

cidc1ykv3#

您不必取消注解www.example.com文件中的任何内容gradle.build。它是供参考的,如果需要,您可以覆盖其中的任何默认值。
问题是Android Studio没有运行负责生成捆绑包的任务。
要在Android Studio中修复此问题,请转到Preferences > Build, Execution, Deployment > Build Tools > Compiler并取消选中"Configure on demand"
现在,您标记为required bundle的任何变体都将自动生成bundle。
默认情况下,debug variant不会生成包:bundleInDebug : false
你可以像这样修改它。这里我还提供了一个例子,如何修改入口点的默认位置和包的默认名称。

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

一旦你做了这些调整,你可能仍然会陷入问题的建设,因为工作室不承认路径从您的 shell 配置文件,所以我可能找不到路径的节点。
I posted a solution to that issue here
这是一个稳定而健壮的解决方案。在您的环境中进行这些更改后,您无需手动执行任何操作。如果您选择了正确的构建变体(也可以在IDE中Studio窗口底部的LHS栏中选择),则在您按下IDE中的按钮时,Bundle将自动构建。

vfwfrxfs

vfwfrxfs4#

当通过create-react-native-app从react原生项目构建一个未签名的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。

k4emjkb1

k4emjkb15#

适用于带有已签名APK的发布。

我试着使用一个未签名的APK文件并安装它,但当我去安装在我的Android平板电脑上时,它给了我一个Failure [INSTALL_PARSE_FAILED_NO_CERTIFICATES]的错误。
我想这是因为APK文件没有签名,平板电脑对此不满意。因此,在生成React Native捆绑包文件后,我能够像往常一样通过Android Studio生成签名的APK文件。

  • 顺便说一句,我们的应用程序是一个功能齐全的Android应用程序,已经存在于Play商店,我们只是添加了React Native到它的咬大小的碎片,因为它是真棒。*

总结一下,我的步骤如下:

1)生成React本机捆绑包:

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)利润!

rn0zuynd

rn0zuynd6#

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

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

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

xghobddn

xghobddn7#

我们需要在android-〉app-〉src-〉main目录中创建资产目录。并运行以下命令

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\

相关问题