简体   繁体   English

React Native:无法从开发服务器下载 JS 包

[英]React Native: Unable to download JS bundle from the Dev Server

I am trying to run basic AwesomeProject app that react native have by default, on Windows 7 machine through Genymotion.我正在尝试通过 Genymotion 在 Windows 7 机器上运行默认情况下反应原生的基本 AwesomeProject 应用程序。 The Virtual Devices that i have tried is Nexus 7 4.2.2 and Nexus 6 5.1.0.我尝试过的虚拟设备是 Nexus 7 4.2.2 和 Nexus 6 5.1.0。

I am using Nodejs (4.3.0)我正在使用 Nodejs (4.3.0)

I followed below steps to overcome JS bundle issue, but still no success:我按照以下步骤来克服 JS 捆绑问题,但仍然没有成功:

  • started Virtual device in Genymotion在 Genymotion 中启动虚拟设备
  • react-native run-android //deployed the app on virtual device react-native run-android //在虚拟设备上部署应用
    • then red screen appears with an error message然后出现红屏并显示错误消息
  • react-native start //started the server react-native start //启动服务器
  • Updated Debug server host for device with my machine IP-address:8081使用我的机器 IP 地址更新了设备的调试服务器主机:8081

    • Visited back to app screen and clicked Reload JS, but no success访问应用程序屏幕并单击重新加载 JS,但没有成功
  • I have also tried re-installing the watchman, as many people on related post suggested to do so, but still no success.我也尝试过重新安装守望者,相关帖子上的许多人都建议这样做,但仍然没有成功。

Moreover, I have seen another solution on React.js official docs, ie executing this command " adb reverse tcp:8081 tcp:8081 " and then starting the server and updating the IP-address and port respectively.此外,我在 React.js 官方文档上看到了另一种解决方案,即执行此命令“ adb reverse tcp:8081 tcp:8081 ”,然后启动服务器并分别更新 IP 地址和端口。 But this solution is useful if i test the app on my personal device rather than emulator.但是如果我在我的个人设备而不是模拟器上测试应用程序,这个解决方案很有用。

Any suggestion or alternate solution is really appreciated.非常感谢任何建议或替代解决方案。

Thanks.谢谢。

OK!!好的!!

First of All you need to do react-native start.首先你需要做 react-native start。

When Application deployed on device, you can tap the Menu button or shake your Cell to load the Menu, Most modern phone dont have the menu button.当应用程序部署在设备上时,您可以点击菜单按钮或摇动您的单元格以加载菜单,大多数现代手机没有菜单按钮。 When it Loads Find Dev Settings.当它加载查找开发设置时。 In the Debugging below, Click Debug Server host and port for device Put your System Local Network IP assigned to you by DHCP.在下面的 Debugging 中,单击 Debug Server host and port for device 将您的系统本地网络 IP 由 DHCP 分配给您。 You can do ifconfig on ubuntu to see your IP.您可以在 ubuntu 上执行 ifconfig 以查看您的 IP。

Put your IP address like this 192.168.xx:8081 Do a reload JS.把你的 IP 地址像这样 192.168.xx:8081 做一个重新加载 JS。

You will be all up and set.你将一切就绪。 :) :)

Important : Make sure that your Phone and System is on Same WIFI.重要提示:确保您的手机和系统在同一个 WIFI 上。

Start the packager:启动打包程序:

react-native start

Go to this url in your browser在浏览器中访问此网址

http://localhost:8081/index.android.bundle?platform=android

Once that loads it should give a better error response than the one you have.一旦加载,它应该提供比您拥有的更好的错误响应。

当我在连接到我的工作 VPN 时运行 react native 打包程序时遇到了这个问题,一旦我断开我的工作 VPN 连接,打包程序就能够为我的应用程序选择正确的 IP 接口。

The problem I encountered was that my port 8081 was already in use by another process and therefor my react native process wouldn't start.我遇到的问题是我的端口 8081 已被另一个进程使用,因此我的 react native 进程无法启动。

using lsof -n -i4TCP:8081 | grep LISTEN使用lsof -n -i4TCP:8081 | grep LISTEN lsof -n -i4TCP:8081 | grep LISTEN pointed me in the correct direction lsof -n -i4TCP:8081 | grep LISTEN为我指明了正确的方向

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM