[置顶] 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

具体操作如下：

确保手机和电脑处于同一局域网下

在项目的命令输入窗口Terminal下，执行以下命令“react-native start –host 192.168.130.231 –port 8081”



再次重新启动应用

应用启动之后，依然是白屏，此时摇晃设备

点击进入Dev Settings。

点击Debug server host for device。

输入你电脑的IP地址和端口号（我的电脑是192.168.130.231:8081）。在Mac上，你可以在系统设置/网络里找查询你的IP地址。在Windows上，打开命令提示符并输入ipconfig来查询你的IP地址。在Linux上你可以在终端中输入ifconfig来查询你的IP地址。

回到开发者菜单然后选择Reload。





到此为止，可以成功显示项目了。