反应原生android未能加载JS捆绑

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

我能够构build项目并将其安装在设备上。 但是当我运行它，我有一个红色的屏幕说

无法下载JS捆绑。 你忘了启动开发服务器还是连接你的设备？

在原生iOS中，我可以select离线加载jsbundle。 我怎么能为Android做同样的事情？ （或者至less，我可以在哪里configuration服务器地址？）

更新

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

  1. react-native start> / dev / null 2>＆1＆
  2. adb反向tcp：8081 tcp：8081

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

要在没有服务器的情况下运行，请运行以下命令将jsfile绑定到apk中：

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

请查看kzzzf的答案了解更多详情。

要将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项目。

下面在Ubuntu 14.04上为我工作： 

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

更新 ：请参阅

  • 在设备上运行（Android）
  • 设备警告被抑制？

更新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的转发stream量。 这就是adb命令所做的。
  • 告诉你的RN应用程序在哪里可以find你的开发服务器。

好的，我想我已经想出了这个问题。 这与我正在运行的watchman的版本有关。

在新的shell中，运行brew update然后： brew unlink watchman然后： brew install watchman

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

我打开这个shell，创build一个新的shell窗口，并从我的项目文件夹运行： react-native run-android 。 一切都与世界正确。

PS。 我原本是守望者的3.2版本。 这升级到3.7。

PPS。 我是新来的，所以这可能不是最快捷的解决scheme，但它已经为我工作。

*有关运行/debugging设备的更多信息*

您可能会发现，如果将应用程序部署到您的Android设备而不是仿真器，则会出现红色屏幕，并显示Unable to load JS Bundle的错误消息。 您需要将您的设备的debugging服务器设置为您的计算机正在运行反应…或者其名称或IP地址。

  1. 按设备Menubutton
  2. selectDev Settings
  3. selectDebug server host for device
  4. input你的机器的IP和Reload JS加上反应端口例如192.168.1.10:8081

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

从您的项目目录中运行 

 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)

一个简单的解决scheme，适用于Ubuntu 14.04。 

 react-native run-android

模拟器（已经启动）将返回：无法下载JS捆绑; 重新启动JS服务器： 

 react-native start

在模拟器上点击Reload JS。 它为我工作。 希望它会有所帮助

在Android的应用程序，我打开菜单（在Genymotion命令+ M） – >开发设置 – >debugging服务器主机和端口的设备

将该值设置为：localhost：8081

它为我工作。

在尝试了这些答案的组合后，这就是为我工作的。

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

1启动Genymotion仿真器。

2从terminal 

 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从模拟器重新加载。

它加载！

我现在可以开始发展。

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

重申一下，这些命令是： 

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

从手机中删除应用程序！ 我尝试了几个步骤，但最终做到了。

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

显然adb反向是在Android 5.0中引入的
在“adb reverse”上获取“error：closed”两次

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

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

这里的修正是杀死在Xterm中运行的节点进程，你可以通过ctrl-c这个窗口（更简单）来杀死它，或者你可以使用lsof -n -i4TCP:8081然后kill -9 PID来find它。

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

检查你的WiFi连接。

另一种可能性可能是你没有连接到无线networking，连接到错误的networking，或者你的开发设置中的IP地址是错误的。 出于某种原因，我的android从无线networking断开，我开始得到这个错误，不知不觉中。

在设备上运行

我find了另一个答案。

  • adb reverse：只适用于Android 5.0+（API 21）。
  • 另一个：通过摇动设备打开开发菜单，进入开发设置 ，转到设备的debugging服务器主机 ，键入您的机器的IP地址和本地开发服务器的端口

更新

现在在Windows上，无需运行react-native启动。 打包程序将自动运行。

以下是在Android（发行版）上运行您的应用程序的简单步骤：

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

2.运行这个命令。

react-native bundle –platform android –dev false –entry-file index.android.js –bundle -out android / app / src / main / assets / index.android.bundle –assets-dest android / app / SRC /主/ RES

所有的文件都被复制。

3.创build签名的APK。

打开android studio。

生成>生成签名APK> [填写必要的细节，在此步骤之前必须生成击键]

您的APK应该生成没有任何错误。 安装在您的设备上，这应该没有任何问题。

您也可以连接您的设备，并直接点击Android工作室上的运行图标进行testing。

生成按键：

  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 -keyize 2048 -validity 10000

它可能会要求你填写一些细节。 这样做，你有你的keystroke文件（ my_private_key.keystore ）可以用来签署你的apk。

我只使用Ubuntu和Android，但无法运行。 我发现了一个非常简单的解决scheme，即更新你的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设备在您的计算机上查找节点服务器，而不是在本地电话上查找。

运行npm从react-native目录开始为我工作。

我发布了一个关于如何生成反应原生包并调整Studio以识别节点安装（特别是在Mac上）的答案：

如何在Android上使用脱机捆绑来反应原生项目？

最初的问题是关于重新加载物理设备中的应用程序。

当你在一个物理设备上debugging应用程序的时候（例如，通过adb），你可以通过点击设备左上angular的“action”button来重新加载JS包。 这将打开选项菜单（重​​新加载，远程debuggingJS …）。

希望这可以帮助。

检查目前没有人提到的一个重要的事情是： 检查你的本地防火墙，确保它被closures 。

看到我的回应在这里： https : //stackoverflow.com/a/41400708/1459275

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

  //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

您可以按照官方页面上提到的指示来解决这个问题。 这个问题发生在真实的设备上，因为JS软件包位于您的开发系统上，而真实设备中的应用程序并不知道它的位置。

Interesting Posts

android：Theme.Material.Light需要API级别21（当前最less8）

Android：单击button时切换相机

生成Google地图发布API密钥

Android Json和空值

PorterDuff.Mode在Androidgraphics中意味着什么？它有什么作用？

Android：LoaderCallbacks.OnLoadFinished调用两次

是否有可能在运行时从Android应用程序dynamic加载库？

Android和得到一个视图与id转换为一个string

TextView setTextColor（）不工作

如何更改android上的hosts文件