logo标签列表

Android无法加载JS捆绑包。

androidreact-native
208

我试图在我的 Nexus5（Android 5.1.1）上运行 AwesomeProject。

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

无法下载 JS bundle。您是否忘记启动开发服务器或连接设备？

在 React Native iOS 中，我可以选择离线加载 jsbundle。如何在 Android 中做同样的事情？（或者至少在哪里可以配置服务器地址？）

更新

要使用本地服务器运行，请在 react-native 项目根目录下运行以下命令

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

请查看 dsissitka 的回答以获取更多详细信息。

要在没有服务器的情况下运行，请通过以下方式将 jsfile 捆绑到 apk 中：

  1. 在 android/app/src/main 下创建 assets 文件夹
  2. curl "http://localhost:8081/index.android.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"

请查看 kzzzf 的回答以获取更多详细信息。

我还没有弄清楚问题所在。但与此同时，你可以在模拟器上尝试一下。在我的Genymotion上它运行得非常好。 - Bryan
当我尝试在本地服务器上输入两个命令来运行时，PowerShell中出现错误，显示：“不允许使用&字符”。我猜想在运行命令时应该在我的应用程序目录的根目录下？ - user2236165
1
这是否意味着在Android 4.1上通过USB进行调试是不可能的，因为不支持adb reverse？ - bonh
我想提醒大家，要执行adb reverse tcp:8081 tcp:8081，您需要ADB 1.0.32版本，而reverse选项不在1.0.31中。 - jvalen
https://stackoverflow.com/questions/52564252/react-native-0-57-cant-find-variable-require-with-metro-react-native-babel - Fabrizio Bertoglio
26个回答
111
将JS文件捆绑到您的apk中，同时让服务器运行（react-native start），请下载bundle到您应用的assets目录中：
curl "http://localhost:8081/index.android.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"

在下一个版本（0.12）中，我们将修复react-native bundle命令，以便与Android项目一起正常工作。

谢谢！我该如何告诉reactInstanceManager使用捆绑的资产？还是这个魔法会自动发生？ - Matthew
10
无法创建文件。 警告：android/app/src/main/assets/index.android.bundle：没有这样的文件或目录。 - almeynman
2
警告：无法创建文件 警告：android/app/src/main/assets/index.android.bundle：没有这样的文件或目录 curl:（23）写入正文失败（0！= 16167） - Shivang
3
在android/app/src/main目录下创建名为"assets"的文件夹。我遇到了这个错误是因为该文件夹还不存在。 - piscator
1
这是我们在本地分发应用进行测试的最佳且简单的方式（通过fabric）。谢谢。 - Dinesh Anuruddha
显示剩余3条评论
91

以下是在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。 问题在于开发服务器在您的工作站localhost上运行，而不是设备的localhost，因此为了使其工作，您需要执行以下操作之一：

5
在OSX上运行 adb reverse tcp:8081 tcp:8081 也可以起作用。 - shyamal
可以了！非常感谢。你知道是否有一种方法可以像iOS的main.jsbundle一样将jscodelocation指向apk资源吗？ - Matthew
@dsissitka，我可以问一下，这个到底是做什么的吗？记录在这个线程里。 - scgough
@Matthew 不好意思，恐怕不行！抱歉！ - dsissitka
为什么我无法在我的应用程序根目录中运行 adb reverse tcp:8081 tcp:8081？这里无法识别 adb，我必须在 Android SDK 平台工具文件夹中运行它。 - Marson Mao
显示剩余2条评论
39

好的，我想我已经找到了问题所在。它与我运行的 watchman 版本有关。

在新的 shell 中运行以下命令：brew update 然后运行：brew unlink watchman 再运行：brew install watchman

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

我保留此 shell 并创建一个新的 shell 窗口，然后从我的项目文件夹中运行：react-native run-android。一切都正常。

附注：最初我使用的是3.2版本的 watchman。这将升级到 3.7 版本。

附注二：我是新手，可能不是最快的解决方案，但它对我起作用了。

* 关于在设备上运行/调试的更多信息 *

您可能会发现，如果将应用程序部署到 Android 设备而不是模拟器，则会出现一个 红色死亡屏幕，其中显示错误信息：无法加载 JS Bundle。您需要将设备的调试服务器设置为运行 react 的计算机的名称或 IP 地址。

  1. 按下设备的 菜单 按钮
  2. 选择 Dev Settings
  3. 选择 Debug server host for device 或 Change Bundle Location
  4. 输入您计算机的 IP 和 React 端口，例如：192.168.1.10:8081

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

@jacobross85 很高兴能帮到你！如果你愿意的话，给我一个赞吧;-) - scgough
1
在安装最新版本之前，我不得不运行brew uninstall watchman。 - Amozoss
我为那些在 Android 设备上进行调试而不是模拟器的人添加了更多信息。 - scgough
我已经运行了最新版本的watchman，但这个方法解决了我的问题。好奇怪。 - pfac
当我点击“开发人员设置”时，应用程序崩溃。 - Joshua Pinter
1
谢谢你兄弟，这真的很有帮助。这就是为什么我会给你点赞的原因。 - Super Developer
17

在你的项目目录下，运行：

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)
1
我也遇到了问题，与楼主报告的问题相同。我使用 react-native run-android 命令从项目文件夹中运行该项目。它在终端中构建成功，但是当我的设备上打开应用程序时，我得到一个红色屏幕显示 无法下载 JS 包 的错误信息。 - scgough
6
您需要运行命令 "adb reverse tcp:8081 tcp:8081"。 - Matthew
1
我运行了 adb reverse tcp:8081 tcp:8081，但是出现了错误：closed error:closed。 - JacobRossDev
1
我遇到了同样的问题，错误提示：closed。请问有什么帮助吗？ - Eusthace
如果您使用的是Android系统，请确保在“开发设置”中输入正确的IP地址。如果您使用的是动态IP地址，它可能会在夜间更改。 - Sam Purcell
“Dev settings”是什么，它在哪里找到？我是新手，但面临同样的问题。 - Lutaaya Huzaifah Idris
13

以下是适用于我在Ubuntu 14.04上使用的简单解决方案。

react-native run-android

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

react-native start

在仿真器上点击重新加载JS。这对我有用，希望能帮到你。

实际上是有效的。在所有答案中，这是最简单的解决方案。真不敢相信这不在官方文档中。 - bluecollarcoder
这篇文章是关于在设备上运行，而不是模拟器。如果没有额外的设置，这些步骤在设备上是无法工作的。请参考被接受的答案。 - davidgoli
8

在安卓应用中，我打开了菜单(Command + M in Genymotion) -> 开发者设置 -> 调试服务器主机和设备端口

将值设置为: localhost:8081

这对我起作用了。

谢谢！对我有用。 - Howard
7

在尝试了这里的一些答案组合后，以下是对我有效的方法。

我正在使用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. 从模拟器重新加载。

它已经加载成功！

我现在可以开始开发了。

执行 "adb reverse" 命令两次，会收到两次 "error: closed" 错误提示。 - almeynman
FYI：我现在正在使用“Daniel Masarin”的答案，将调试服务器主机设置为我的WiFi地址和端口8081来完成上述操作，它适用于RN v 0.17.0。 - ooolala
非常感谢，这对我有用 :) 只在API 21以上的版本上有效。 - Ashwini Bhat
4

从您的手机中删除该应用程序！我尝试了几个步骤，但最终还是这样做了。

  1. 如果您以前尝试过运行应用程序但失败了，请删除它从您的安卓设备中。
  2. 运行$ react-native run-android
  3. 在您的安卓设备上从应用程序内部打开React Rage Shake菜单，进入Dev Settings然后到Debug server host & port for device。在那里输入您的服务器IP（计算机的IP）和主机8081，例如192.168.50.35:8081。在Mac上，您可以在系统偏好设置 -> 网络 -> 高级... -> TCP/IP ->IPv4地址中找到计算机的IP。
  4. 再次打开Rage Shake菜单，然后点击Reload JS。
2
2
这里是在安卓上运行应用程序（发布）的简单步骤：
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 Studio。
“Build > Generate Signed APK >” [填写所需细节，此步骤之前必须生成按键记录]
您的APK应该可以在没有任何错误的情况下生成。将其安装到您的设备上，这应该可以正常运行而没有任何问题。
您还可以连接您的设备并直接在Android Studio上点击“Run”图标进行测试。
生成按键记录：
1. 转到 "C:\Program Files\Java\jdkx.x.x_x\bin"
2. 运行以下命令：
keytool -genkey -v -keystore d:\my_private_key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
它可能会要求您填写一些详细信息。完成操作后，您将拥有可用于签署apk的按键记录文件（my_private_key.keystore）。
在执行 react-native bundle 命令后，我遇到了错误：重复的资源。 - Amir Shabani
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接