如何在没有开发服务器的情况下在设备上安装未签名的apk?

218

由于我是一名新手,如果在步骤中有任何错误,请告诉我。

按照文档使用命令构建了一个React Native Android应用程序:

react-native android

在设备上运行时,使用以下命令:

react-native run-android

这使我在projectfolder/android/app/build/outputs/apk目录下得到了2个apk文件的输出结果:

enter image description here

然后,当我安装这个apk之后,它会要求连接到开发服务器来捆绑JS。但我的要求是,用户不需要与开发服务器打交道,只需安装apk即可完成所有操作。

我已经查阅了一些stackoverflow问题,但对于不需要开发服务器的未签名apk构建并没有帮助。

你们能否帮我找到如何在React Native中构建和未签名apk的方法?


1
运行 'react-native start',它将在开发模式下为您提供js捆绑包。目的是让您可以即时编辑js文件。使用发布模式不需要任何服务器,因为它将与必要的捆绑包一起包含。请参见下面的答案。 - kar
17个回答

318

您需要手动创建用于调试构建的捆绑包。

调试构建的捆绑包:

#React-Native 0.59
react-native bundle --dev false --platform android --entry-file index.js --bundle-output ./android/app/src/main/assets/index.android.bundle --assets-dest ./android/app/src/main/res

#React-Native 0.49.0+
react-native bundle --dev false --platform android --entry-file index.js --bundle-output ./android/app/build/intermediates/assets/debug/index.android.bundle --assets-dest ./android/app/build/intermediates/res/merged/debug

#React-Native 0-0.49.0
react-native bundle --dev false --platform android --entry-file index.android.js --bundle-output ./android/app/build/intermediates/assets/debug/index.android.bundle --assets-dest ./android/app/build/intermediates/res/merged/debug

然后在捆绑之后构建APK:

$ cd android
#Create debug build:
$ ./gradlew assembleDebug
#Create release build:
$ ./gradlew assembleRelease #Generated `apk` will be located at `android/app/build/outputs/apk`

另一种方法可能是修改Gradle脚本。


4
如果有人遇到资产丢失的问题:这个方法对我有效 --assets-dest ./android/app/src/main/res/ - Juan Solano
14
如果我在应用程序启动时执行此操作会出现大红屏幕吗?(注:我是在弹出后直接运行此操作) - Simon Forsberg
3
如何构建最新版本的应用程序,因为我们没有index.android.js文件? - Vivek
9
最新版本的用户,请将入口点更改为 --entry-file index.js,谢谢。 - Rishabh Bhatia
6
针对新的React Native版本,其中index.js文件在iOS和Android上是通用的,执行以下命令:react-native bundle --dev false --platform android --entry-file index.js --bundle-output ./android/app/build/intermediates/assets/debug/index.android.bundle --assets-dest ./android/app/build/intermediates/res/merged/debug - ir2pid
显示剩余11条评论

134

React版本0.62.1

在您的根项目目录中,请确保您已经有了目录android/app/src/main/assets/,如果没有,请创建目录。然后创建新文件并保存为index.android.bundle并将文件放置在这样的位置android/app/src/main/assets/index.android.bundle

之后运行以下命令:

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/

cd android && ./gradlew assembleDebug

那么您可以在 app/build/outputs/apk/debug/ 目录下找到 apk 文件:app-debug.apk


@jeeva:如何将React Native应用程序连接回开发服务器? - Mayur Baldha
3
创建 index.android.bundle 的这个步骤非常重要,因为它可以避免在主机上使用开发服务器。 - Lee Elton
@Mayur Balha:您可以通过USB或WiFi(连接在同一网络上)重新连接。对于WiFi,请在React应用程序中连接回服务器,在模拟器上摇动您的移动设备,按Win+R,然后单击开发设置。向下滚动到“调试服务器主机和端口”,输入您的IP地址和端口(在Windows上打开cmd输入“ipconfig”或Mac上打开终端输入“ifconfig”),例如192.168.1.1:8080,然后按确定,再次摇动或按Win+R以重新加载模拟器,现在您可以看到应用程序重新连接到开发环境(仅适用于调试,而不适用于发布APK)。 - Jeeva
在RN 0.62.1上运行良好... 应该是最近版本的正确答案! - Albert E. Souza
我必须使用npx来运行: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/ - undefined

128

请按照以下步骤操作。

打包您的JS:

如果您的项目根目录中有 index.android.js,则运行

react-native bundle --dev false --platform android --entry-file index.android.js --bundle-output ./android/app/build/intermediates/assets/debug/index.android.bundle --assets-dest ./android/app/build/intermediates/res/merged/debug
如果项目根目录中有 index.js 文件,则运行。
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

创建调试APK:

cd android/
./gradlew assembleDebug

然后您可以在此处找到您的APK:

cd app/build/outputs/apk/

12
如果我在应用程序启动时执行此操作,会出现一个大红色屏幕吗?(注:我是在弹出后直接运行此操作) - Simon Forsberg
2
@SimonForsberg 如果你正在使用react ^0.5,将入口点更改为index.js而不是App.js或index.android.js,react-native bundle --dev false --platform android --entry-file index.js --bundle-output ./android/app/build/intermediates/assets/debug/index.android.bundle --assets-dest ./android/app/build/intermediates/res/merged/debug - d.bayo
6
这个命令可以构建一个apk,但是如果没有打包服务器,这个apk将无法运行。然而,现在它不起作用了。 - Vishal Chhodwani
3
这不会起作用,因为它需要一个开发服务器。 - sheriff_paul
2
我遇到了同样的问题,在生成调试APK时,我能够安装它,但是我需要使用开发服务器。当我使用发布APK时,我无法在手机上安装它,我不知道出了什么问题。 - aName
显示剩余5条评论

29

在项目目录中运行以下命令。

对于旧版本的react native(您将在根目录中看到index.android.js):

mkdir -p android/app/src/main/assets && rm -rf android/app/build && 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 && cd android && ./gradlew clean assembleRelease && cd ../

对于React Native新版本(你只需要在根目录中看到index.js文件):
mkdir -p android/app/src/main/assets && rm -rf android/app/build && 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 && cd android && ./gradlew clean assembleRelease && cd ../

apk文件将在以下位置生成:

  • Gradle < 3.0: android/app/build/outputs/apk/
  • Gradle 3.0+: android/app/build/outputs/apk/release/

你能否详细说明一下,并解释一下它如何解决问题? - Priyal
我遇到了打开 index.android.bundle 文件时出错的问题,但是通过您的建议已经解决了。非常感谢... :) - zephyr
6
对我而言,这段话是一条命令:$ mkdir -p android/app/src/main/assets && rm -rf android/app/build && 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 && cd android && ./gradlew assembleDebug,它的作用是创建一个名为android/app/src/main/assets的文件夹,并删除名为android/app/build的文件夹,然后使用React Native工具打包JavaScript代码和资源文件,最后在android目录下运行./gradlew assembleDebug命令进行调试构建。 - Arif
在任何项目根目录中都找不到文件:index.android.js。 - Anuj
1
请注意,对于根目录中有index.js而不是index.android.js的新项目,需要将--entry-file index.android.js替换为--entry-file index.js - olfek
@daka,你错了,index.android.js才是正确的。 - sheriff_paul

18

在您按照第一个回答的步骤之后,您可以使用以下方式运行应用程序

react-native run-android --variant=debug

你的应用将无需打包程序而运行


1
最简单的答案一直是最有效的,它运行无误,花了几天时间测试不同的命令行和大量的JS配置,而所有的一切都在这里得到了总结。 - Nicolas Silva

12

自 react-native 0.57 版本起,先前提供的所有答案都已过时,因为 gradle 希望找到 bundle 和资源的目录已更改。

不使用 react-native bundle 的简单方法

构建调试版本最简单的方法是根本不使用 react-native bundle 命令,而是直接修改您的 app/build.gradle 文件。

app/build.gradle 文件中的 project.ext.react 映射中,添加 bundleInDebug: true 条目。 如果您希望它不是一个 --dev 构建(无警告和缩小的 bundle),则还应该在同一映射中添加 devDisabledInDebug: true 条目。

使用 react-native bundle

如果由于某种原因您需要或想要使用 react-native bundle 命令创建 bundle,然后使用 ./gradlew assembleDebug 创建包含 bundle 和资源的 APK,则必须确保将 bundle 和资源放置在 gradle 可以找到的正确路径中。

自 react-native 0.57 版本起,这些路径为 android/app/build/generated/assets/react/debug/index.android.js(用于 bundle)

android/app/build/generated/res/react/debug(用于资源)。因此,手动捆绑和构建包含 bundle 和资源的 APK 的完整命令为:

react-native bundle --dev false --platform android --entry-file index.js --bundle-output ./android/app/build/generated/assets/react/debug/index.android.bundle --assets-dest ./android/app/build/res/react/debug

然后执行

./gradlew assembleDebug

bundle和资源路径

请注意,gradle查找bundle和资源的路径可能会更改。要找到这些路径的位置,请查看node_modules/react-native目录下的react.gradle文件。以def jsBundleDir =def resourcesDir =开头的行分别指定gradle查找bundle和资源的目录。


建议的路径与生成的 react-native bundle 命令不匹配。在 React Native 0.63 中,没有任何变体会将 bundle 包含在 APK 中。请参阅 报告给 React Native CLI 文档的错误 的描述。 - Radek Matěj
但感谢您提出“bundleInDebug”的建议。这是正确的方法。当有Gradle脚本负责一切时,使用“react-native bundle”毫无意义。 - Radek Matěj
路径可能已经从React Native 0.57到现在发生了变化,所以我不知道这些路径是否仍然是最新的。 - TheBaj
是的,它们已经发生了巨大的变化。你的答案仍然是最接近最优解的。我只想添加一条注释,即这些路径都无法使用了。 - Radek Matěj

11

无需开发服务器生成调试APK

如果您真的想要为测试目的生成一个可以在没有开发服务器的情况下运行的调试APK,那么恭喜您!我来帮助你。 :)
大家都说我们需要运行两个命令 react-native bundle ...,然后再运行 gradlew assembleDebug,但是生成的APK仍然无法在没有开发服务器的情况下工作。经过多次研究和尝试,我发现我们需要更改Gradle文件(如第2步所述)。只需按照以下步骤操作:

  1. 在React Native项目中进入 /android/app/src/main 文件夹,创建一个名为 assets 的文件夹。
  2. 编辑 android > app > build.gradle 文件。
project.ext.react = [
    ...
    bundleInDebug: true, // add this line
]

在你的React Native项目根目录下运行此命令。
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
  1. 现在进入android文件夹:cd android
  2. 然后运行以下命令:gradlew assembleDebug
    (如果构建失败,请尝试从Android Studio中构建assembleDebug)

这将在android/app/build/outputs/apk/debug目录中创建app-debug.apk文件,您可以在没有开发服务器的情况下安装和运行。


2
在复制资源后,我遇到了重复资源的问题。 - Muhammad Maqsood
1
我点赞了这个答案,因为第二步(添加bundleInDebug: true)是必要的,以使其在没有服务器的情况下正常工作。已经在react-native 0.66上进行了测试。你最终会在android/app/build/generated/res/react/debug/和android/app/src/main/res中得到重复的资源。解决方案是删除后者目录中的重复项。 - mike

8

这里有两个扩展可以用于此。这是添加到 React Native 中设置它们的:

  1. disableDevInDebug: true: 禁用 debug buildType 中的 dev server。
  2. bundleInDebug: true: 将 jsbundle 添加到 debug buildType 中。

因此,您在 android/app/build.gradle 中的最终 project.ext.react 应该如下所示:

project.ext.react = [
    enableHermes: false,  // clean and rebuild if changing
    devDisabledInDev: true, // Disable dev server in dev release
    bundleInDebug: true, // add bundle to dev apk
]

1
在你的代码中应该使用bundleInDebug而不是bundleInDev。 - Peretz30
这应该是被接受的答案。 devDisabledInDevbundleInDebug 都应该设置为 true! - Teo

6

如果有人最近遇到了相同的问题,我正在使用React Native 0.59.8(也测试过RN 0.60),我可以确认其他答案中的一些步骤,以下是步骤:

  1. 卸载您设备上已安装的最新编译版本的应用程序

  2. 运行 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

  3. 运行 cd android/ && ./gradlew assembleDebug

  4. 在文件夹android/app/build/outputs/apk/debug中获取您的app-debug.apk

祝你好运!


1
不起作用!!!它生成了调试APK,但应用程序仍然需要开发服务器。 - aName
这在react-native 0.59.8中无法工作,因为gradle期望bundle位于android/app/build/generated/assets/react/debug/index.android.js,而资产位于android/app/build/generated/res/react/debug,这是自react-native 0.57以来的变化。 - TheBaj
适用于React Native 0.60以上,运行良好。 - Moso Akinyemi

5

您可以将 app-release.apk 安装/共享到任何设备上。 - Dharam Mali
2
通常情况下,调试版本与发布版本具有不同的配置(例如,它使用暂存 API)。如果您想要一个独立的 APK,并且希望其使用与发布版本不同的构建配置,则这并没有什么帮助。 - Josh
此 APK 仅用于开发/测试目的。 - Dharam Mali

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接