Android无法加载JS包

时间:2015-09-14 19:25:17

标签: android react-native

我试图在我的Nexus5(Android 5.1.1)上运行AwesomeProject。

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

  

无法下载JS捆绑包。您是否忘记启动开发服务器或连接设备?

在本机iOS中,我可以选择离线加载jsbundle。我怎么能为Android做同样的事情? (或者至少,我在哪里可以配置服务器地址?)

更新

要使用本地服务器运行,请在react-native项目根目录

下运行以下命令
  1. react-native start > /dev/null 2>&1 &
  2. adb reverse tcp:8081 tcp:8081
  3. 请详细了解dsissitka的答案。

    要在没有服务器的情况下运行,请通过运行:

    将jsfile捆绑到apk中
    1. android/app/src/main
    2. 下创建资产文件夹
    3. curl "http://localhost:8081/index.android.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"
    4. 请详细了解kzzzf的答案。

26 个答案:

答案 0 :(得分:104)

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

答案 1 :(得分:87)

以下内容在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。 问题是开发服务器在您工作站的本地主机上运行,​​而不是在设备上运行,因此为了使其工作,您需要:

答案 2 :(得分:38)

好的,我想我已经知道这里的问题是什么了。这与我正在运行的watchman版本有关。

在新的shell中,运行brew update 然后:brew unlink watchman 然后:brew install watchman

现在,您可以从项目文件夹

运行react-native start

我打开这个shell,创建一个新的shell窗口并从我的项目文件夹运行:react-native run-android。一切都与世界是对的。

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

PPS。我是新手,所以这可能不是解决方案最敏捷的途径,但它对我有用。

*更多信息用于运行/调试设备*

您可能会发现,如果您将应用部署到Android设备而非仿真器,则会出现红色死机屏幕,并显示错误Unable to load JS Bundle。您需要将设备的调试服务器设置为运行反应的计算机...其名称或IP地址。

  1. 按设备Menu按钮
  2. 选择Dev Settings
  3. 选择Debug server host for device
  4. 键入您机器的IP和Reload JS以及反应端口,例如192.168.1.10:8081
  5. 更多信息:http://facebook.github.io/react-native/docs/running-on-device-android.html

答案 3 :(得分:16)

从项目目录中,运行

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)

答案 4 :(得分:13)

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

react-native run-android

模拟器(已经启动)将返回:无法下载JS Bundle;再次启动JS服务器:

react-native start

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

答案 5 :(得分:7)

在android上的app中,我打开了Menu(Genymotion中的Command + M) - &gt;开发设置 - &gt;调试服务器主机&amp;设备端口

将值设置为:localhost:8081

它对我有用。

答案 6 :(得分: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从模拟器重新加载。

加载!

我现在可以开始开发了。

答案 7 :(得分:4)

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

  1. 如果您之前尝试运行应用但失败了,从您的Android设备中删除
  2. 运行$ react-native run-android
  3. 在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找到计算机的IP。
  4. 再次打开Rage Shake菜单,然后点击Reload JS

答案 8 :(得分:2)

显然adb reverse在Android 5.0中引入 Getting "error: closed" twice on "adb reverse"

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

答案 9 :(得分:2)

我没有足够的声誉来评论,但这是指dsissitka的回答。 它也可以在Windows 10上运行。

重申一下,命令是:

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

答案 10 :(得分:2)

以下是在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   机器人/应用/ SRC /主/ RES

复制所有文件。

第3。创建已签名的APK。

打开android studio。

构建&gt;生成签名APK&gt; [填写所需详细信息,必须在此步骤之前生成击键]

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

您也可以连接您的设备并直接点击android studio上的Run图标进行测试。

生成按键:

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

  2. 运行

  3.   

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

    可能会要求您填写一些细节。做它并且你有你的击键文件( my_private_key.keystore ),可用于签署你的apk。

答案 11 :(得分:1)

Running on device

我找到了另一个答案。

  • adb reverse:仅适用于Android 5.0及(API 21)。
  • 另一个:通过摇动设备打开开发人员菜单,转到开发设置,转到设备的调试服务器主机,输入设备的IP地址和本地开发服务器的端口

答案 12 :(得分:1)

检查到目前为止没有人提到过的一件重要事情: 检查您的本地防火墙,确保其已关闭

请在此处查看我的回复: https://stackoverflow.com/a/41400708/1459275

答案 13 :(得分:1)

更新

现在在Windows上无需运行react-native start。打包器将自动运行。

答案 14 :(得分:1)

检查你的wifi连接。

另一种可能是您未连接到wifi,连接到错误的网络,或者您的开发设置中的IP地址错误。由于某种原因,我的android与wifi断开连接,我开始在不知不觉中得到这个错误。

答案 15 :(得分:1)

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

这里的修复是杀死在Xterm中运行的节点进程,你可以通过ctrl-c该窗口(更容易)杀死它,或者你可以使用lsof -n -i4TCP:8081然后{{1}找到它}。

然后再次运行kill -9 PID

答案 16 :(得分:0)

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

答案 17 :(得分:0)

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

当您在物理设备中调试应用程序时(例如通过adb),您可以通过单击左上角的&#34;动作&#34;重新加载JS包。您设备的按钮。这将打开选项菜单(Reload,Debug JS远程...)。

希望这有帮助。

答案 18 :(得分:0)

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

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

答案 19 :(得分:0)

You can follow the instruction mentioned on the official page to fix this issue. This issue occur on real device because the JS bundle is located on your development system and the app inside your real device is not aware of it's location.

答案 20 :(得分:0)

在新的React Native(肯定是0.59)中,调试配置位于 async componentDidMount () { this.unmounted = false; await firebase.auth().onAuthStateChanged((user) => { if (this.unmounted) { return false; } if(user !== null) { this.setState({ isLogged: true, loaded: true }); } else { this.setState({ isLogged: false, loaded: true }); } }) } componentWillUnmount(){ this.unmounted = true; }

内部
android/app/src/debug/res/xml/react_native_config.xml

答案 21 :(得分:0)

在同一终端上启动两个终端,并在第一个终端上运行react-native start和在第二个终端上运行react-native run-android这个问题可以通过简单的方式解决。祝你好运

答案 22 :(得分:0)

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

步骤1,通过在您的终端中运行adb设备来检查adb设备是否得到授权

如果未经授权,请运行以下命令

步骤2,sudo adb kill-server 步骤3,sudo adb启动服务器

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

如果不是设备,则不是未经授权的设备,而不是未经授权的

第4步,运行npx react-native run-android

在我的情况下,这种方法已经奏效,希望能解决您的问题。

答案 23 :(得分:0)

我发现这很奇怪,但是找到了解决方案。 我注意到我的项目文件夹偶尔会变为只读,并且无法从VS中保存它。因此,我读到了一条建议,即将NPM从本地用户PATH转移到系统范围的PATH全局变量,它的工作原理很吸引人。

答案 24 :(得分:0)

###这是我的解决方案

以上解决方案均不能解决我的问题,但只能按照以下步骤为我工作。 添加network-security-config.xml文件

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

然后使用{p>更新AndroidManifest.xml文件

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

答案 25 :(得分:-1)

从react-native目录运行 npm start 为我解决了问题。