Android 加载 JS 包失败

Question

我正尝试在我的 Nexus5 (android 5.1.1) 上运行 AwesomeProject。

我能够构建项目并将其安装到设备上。但是当我运行它时，我得到一个红色屏幕说

Unable to download JS bundle. Did you forget to start the development server or connect your device?

在react native中iOS，我可以选择离线加载jsbundle。我怎样才能为 Android 做同样的事情？（或者至少，我可以在哪里配置服务器地址？）

更新

用本地服务器运行，在你的react-native项目根目录下运行执行以下命令

react-native start > /dev/null 2>&1 &
adb reverse tcp:8081 tcp:8081

请查看 dsissitka 的回答了解更多详情。

在没有服务器的情况下运行，通过运行ning将js文件打包到apk中：

在 android/app/src/main
curl "http://localhost:8081/index.android.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"

详情请看kzzzf的回答

Answer 1

从您的项目目录，运行

react-native start

输出如下：

$ react-native start
 ┌────────────────────────────────────────────────────────────────────────────┐ 
 │  Running packager on port 8081.                                            │ 
 │                                                                            │ 
 │  Keep this packager running while developing on any JS projects. Feel      │ 
 │  free to close this tab and run your own packager instance if you          │ 
 │  prefer.                                                                   │ 
 │                                                                            │ 
 │  https://github.com/facebook/react-native                                  │ 
 │                                                                            │ 
 └────────────────────────────────────────────────────────────────────────────┘ 
Looking for JS files in
   /home/user/AwesomeProject 


React packager ready.

[11:30:10 PM] <START> Building Dependency Graph
[11:30:10 PM] <START> Crawling File System
[11:30:16 PM] <END>   Crawling File System (5869ms)
[11:30:16 PM] <START> Building in-memory fs for JavaScript
[11:30:17 PM] <END>   Building in-memory fs for JavaScript (852ms)
[11:30:17 PM] <START> Building in-memory fs for Assets
[11:30:17 PM] <END>   Building in-memory fs for Assets (838ms)
[11:30:17 PM] <START> Building Haste Map
[11:30:18 PM] <START> Building (deprecated) Asset Map
[11:30:18 PM] <END>   Building (deprecated) Asset Map (220ms)
[11:30:18 PM] <END>   Building Haste Map (759ms)
[11:30:18 PM] <END>   Building Dependency Graph (8319ms)

Answer 2

以下内容使它在 Ubuntu 14.04 上对我有用：

cd (App Dir)
react-native start > /dev/null 2>&1 &
adb reverse tcp:8081 tcp:8081

更新：见

更新 2：@scgough 我们收到此错误是因为 React Native (RN) 无法从我们的开发服务器运行获取 JavaScript工作站。您可以在此处了解为什么会发生这种情况：

https://github.com/facebook/react-native/blob/42eb5464fd8a65ed84b799de5d4dc225349449be/ReactAndroid/src/main/java/com/facebook/react/devsupport/DevServerHelper.java#L116-L137

如果您的 RN 应用程序检测到您正在使用 Genymotion 或模拟器，它会尝试从 GENYMOTION_LOCALHOST (10.0.3.2) 或 EMULATOR_LOCALHOST (10.0.2.2) 获取 JavaScript ). 否则它假定您正在使用设备并尝试从 DEVICE_LOCALHOST (localhost) 获取 JavaScript。问题是开发服务器运行在你工作站的本地主机上，而不是设备的本地主机上，所以为了让它工作，你需要：

将流量从（设备的本地主机）：8081/tcp 转发到（工作站的本地主机）：8081/tcp。这就是 adb 命令的作用。
Tell your RN app where it can find your dev server.

Answer 3

好的，我想我已经知道问题出在哪里了。这与 watchman 的版本有关我是运行ning.

在新 shell、运行 brew update 然后：brew unlink watchman 然后：brew install watchman

现在，您可以从您的项目文件夹运行react-native start

我让这个 shell 打开，从我的项目文件夹中创建一个新的 shell window 和运行: react-native run-android。世界上一切都是对的。

ps。我最初使用的是守望者 3.2 版。这将我升级到 3.7。

pps。我是新手，所以这可能不是解决问题的最快途径，但它对我有用。

* 有关 RUNNING/DEBUGGING 在设备上的更多信息 *

您可能会发现，如果您将应用程序部署到 Android 设备而不是模拟器，您会看到 红屏死机 并显示错误消息 Unable to load JS Bundle.您需要将设备的调试服务器设置为您的计算机运行ning react...它的名称或 IP 地址。

按下设备 Menu 按钮
Select Dev Settings
Select Debug server host for device 或 Change Bundle Location
输入您机器的 IP 并重新加载 JS 以及反应端口，例如192.168.1.10:8081

更多信息：http://facebook.github.io/react-native/docs/running-on-device-android.html

Answer 4

要将 JS 文件捆绑到您的 apk 中，同时让您的服务器运行 (react-native start) 下载捆绑包到您应用程序的资产目录中：

curl "http://localhost:8081/index.android.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"

在下一个版本 (0.12) 中，我们将修复 react-native bundle 命令以按预期方式处理 android 项目。

Answer 5

显然 adb reverse 是在 Android 5.0
中引入的

我想我们必须继续 kzzzf 的回答

Answer 6

在尝试了这里的答案组合之后，这就是对我有用的方法。

我使用 Genymotion 作为我的模拟器。

1 启动 Genymotion 模拟器。

2 来自终端

cd AwesomeProject
react-native run-android # it loads in genymotion and fails with bundle error
react-native start > /dev/null 2>&1 & # from dsissitka
adb reverse tcp:8081 tcp:8081 # from dsissitka

3 从模拟器重新加载。

载入中！

我现在可以开始开发了。

Answer 7

我没有足够的声誉来发表评论，但这是指 dsissitka 的回答。它也适用于 Windows 10。

重申一下，命令是：

cd (App Dir)
react-native start > /dev/null 2>&1 &
adb reverse tcp:8081 tcp:8081

Answer 8

在 android 上的应用程序中，我打开了菜单（Genymotion 中的 Command + M）-> 开发设置 -> 设备的调试服务器主机和端口

将值设置为：localhost:8081

对我有用。

Answer 9

适用于 Ubuntu 14.04 的简单解决方案。

react-native run-android

模拟器（已启动）将return：无法下载 JS Bundle；重新启动 JS 服务器：

react-native start

在模拟器上点击 Reload JS。它对我有用。希望对你有帮助

Answer 10

停止 react-native run-android 进程后，我在 Linux 上得到了这个。节点服务器似乎仍在运行ning，所以下次您运行它时，它不会运行正确并且您的应用程序无法连接。

这里的解决方法是终止在 Xterm 中运行ning 的节点进程，你可以通过 ctrl-cing 那个 window（更简单）来终止它，或者你可以找到它使用 lsof -n -i4TCP:8081 然后 kill -9 PID。

然后运行再 react-native run-android。

Answer 11

检查您的 wifi 连接。

另一种可能是您没有连接到 wifi，连接到错误的网络，或者您的开发设置中的 ip 地址有误。出于某种原因，我的 android 与 wifi 断开连接，我开始在不知不觉中收到此错误。

Answer 12

从您的 phone 中删除该应用程序！我尝试了几个步骤，但最终还是成功了。

如果您之前尝试运行您的应用程序但失败了，请从您的 android 设备中删除它。
运行 $ react-native run-android
从您的 android 设备上的应用程序中打开 React Rage Shake 菜单，转到 Dev Settings，然后转到 Debug server host & port for device。输入您的服务器 IP（您计算机的 IP）和主机 8081，例如192.168.50.35:8081。在 mac 上，您可以在 System Preferences -> Network -> Advanced... -> TCP/IP -> IPv4 Address.
再次打开 Rage Shake 菜单并单击 Reload JS。

Answer 13

我只使用 Ubuntu 和 Android，我无法得到它运行ning。我找到了一个非常简单的解决方案，即更新您的 package.json 文件，更改以下行：

"scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },

到

"scripts": {
    "start": "adb reverse tcp:8081 tcp:8081 && node node_modules/react-native/local-cli/cli.js start"
  },

然后您运行通过键入

服务器

npm run start

这确保 android 设备在您的计算机上而不是在 phone 本地查找节点服务器。

Answer 14

Running on device

我找到了另一个答案。

adb reverse：仅适用于 Android 5.0+ (API 21).
另一个：通过摇动设备打开开发者菜单，转到开发设置，转到设备的调试服务器主机，键入在你的机器的IP地址和本地开发服务器的端口

Answer 15

运行 npm start 来自 react-native 目录对我有用。

Answer 16

一个更新

现在 windows 不需要运行 react-native 启动。打包器将自动运行。

Answer 17

initial question 是关于在物理设备中重新加载应用程序。

当您在物理设备（即通过 adb）中调试应用程序时，您可以通过单击设备左上角的 "action" 按钮重新加载 JS 包。这将打开选项菜单（重新加载、远程调试 JS...）。

希望对您有所帮助。

Answer 18

到目前为止还没有人提到过一件重要的事情： 检查您的本地防火墙，确保它已关闭。

在这里查看我的回复：

Answer 19

可以通过以下步骤轻松解决此错误：

    //run the command at /android sdk / platforms-tool folder
        adb reverse tcp:8081 tcp:8081

    //now come to root folder of your app
    1. npm start
    2. create 'assets' folder inside rootApp/android/app/src/main/
    3. curl "http://localhost:8081/index.android.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"
    4. make sure anyone physical or virtual device attached is running.
    5. react-native run-android

Answer 20

您可以按照official page中提到的说明来解决这个问题。此问题发生在 真实设备 上，因为 JS 包位于您的开发系统上，而您真实设备中的应用不知道它的位置。

Answer 21

以下是运行您的应用在 android（发布）上的简单步骤：

1.转到您的应用程序根目录。

2。运行这个命令。

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。创建签名 APK。

打开android工作室。

Build > Generate Signed APK > [填写所需的详细信息，必须在此步骤之前生成击键]

您的 APK 生成应该没有任何错误。在您的设备上安装，这应该可以正常工作。

您也可以连接设备，直接点击android工作室的运行图标进行测试。

生成击键：

转到 C:\Program Files\Java\jdkx.x.x_x\bin
运行

keytool -genkey -v -keystore d:\my_private_key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

它可能会要求您填写一些详细信息。这样做，你就有了你的击键文件（my_private_key.keystore），它可以用来签署你的 apk。

Answer 22

在新的 React Native（当然是 0.59）中，调试配置在里面 android/app/src/debug/res/xml/react_native_config.xml

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
  <domain-config cleartextTrafficPermitted="true">
    <domain includeSubdomains="false">localhost</domain>
    <domain includeSubdomains="false">10.0.2.2</domain>
    <domain includeSubdomains="false">10.0.3.2</domain>
  </domain-config>
</network-security-config>

Answer 23

在同一个终端和第一个终端上启动两个终端运行 react-native启动和第二个终端react-native run-android这个问题很简单地解决了。祝你好运

Answer 24

嘿，我的 react-native 裸项目遇到了这个问题，IOS 模拟器工作正常，但 android 一直给我这个错误。这是一个对我有用的可能解决方案。

第 1 步，在您的终端中检查 adb 设备是否被运行ning 授权：adb devices

如果是未授权运行以下命令

第二步，sudo adb kill-server 第三步，sudo adb start-server

然后检查 adb devices 命令是否显示连接的设备列表模拟器 5554 设备

instead of unauthorized if it is device instead of unauthorized

第 4 步，运行 npx react-native 运行-android

这在我的实例中有效。

Answer 25

我发现这很奇怪，但我找到了解决方案。我注意到我的项目文件夹偶尔会变为只读状态，我无法从 VS 中保存它。因此，我阅读了将 NPM 从本地用户 PATH 转移到系统范围的 PATH 全局变量的建议，它非常有效。

Answer 26

### 这是我的解决方案

None 以上解决方案可以解决我的问题，但只能按照以下适合我的步骤操作。在network-security-config.xml文件中添加

    <domain-config cleartextTrafficPermitted="true">
          <domain includeSubdomains="true">10.0.2.2</domain>
    </domain-config>
    ...

然后用

更新AndroidManifest.xml文件

<application
+   android:networkSecurityConfig="@xml/network_security_config"
    ...

Android 加载 JS 包失败

Android failed to load JS bundle

android

react-native

更新

用本地服务器运行，在你的react-native项目根目录下运行执行以下命令

在没有服务器的情况下运行，通过运行ning将js文件打包到apk中：