React Native真机测试404错误

无法通过localhost:8081调试程序

adb reverse tcp:8081 tcp:8081

React Native真机测试404错误

由于项目的原因,我们小组正式进行React Native技术调研,用以开发Android和Ios产品,在React Native的初步接触中,经过开发环境的搭建,成功在WebStrom平台下创建了第一个React Native的project。
使用真机运行时,页面白屏,摇晃手机后Reload后的页面如下:
这里写图片描述
在浏览器输入“http://localhost:8081/”,结果如下:
这里写图片描述
说明此时React Native启动正常,并且通过localhost可以成功访问,因为当前手机连接的WIFI和电脑是同一个局域网,并且电脑的ip为
这里写图片描述
此时,在浏览器输入“http://192.168.130.231:8081/”,结果显示我们无法访问到React Native的资源:
这里写图片描述

现象描述完毕。
在网上查找资料,有通过命令“adb reverse tcp:8081 tcp:8081”再配置Dev Setting这种解决方案的,但是我试过并没有用。
后面总算在Facebook上找到一条命令:
react-native start --host xxx.xxx.xx.xx --port 8081

具体操作如下:

  1. 确保手机和电脑处于同一局域网下
  2. 在项目的命令输入窗口Terminal下,执行以下命令“react-native start --host 192.168.130.231 --port 8081”
    这里写图片描述
  3. 再次重新启动应用
  4. 应用启动之后,依然是白屏,此时摇晃设备
  5. 点击进入Dev Settings。
  6. 点击Debug server host for device。
  7. 输入你电脑的IP地址和端口号(我的电脑是192.168.130.231:8081)。在Mac上,你可以在系统设置/网络里找查询你的IP地址。在Windows上,打开命令提示符并输入ipconfig来查询你的IP地址。在Linux上你可以在终端中输入ifconfig来查询你的IP地址。
  8. 回到开发者菜单然后选择Reload。
    这里写图片描述 这里写图片描述
    到此为止,可以成功显示项目了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值