windows平台开发react-native的那些坑

最新推荐文章于 2024-09-29 15:25:37 发布

Quiet-Night

最新推荐文章于 2024-09-29 15:25:37 发布

阅读量6.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： React 文章标签： android

本文链接：https://blog.youkuaiyun.com/DeepLies/article/details/52929022

React 专栏收录该内容

19 篇文章

订阅专栏

本文记录了在Windows平台开发React-Native时遇到的调试问题，包括真机连接与热更新问题的解决方案。在真机调试时，通过指定电脑IP和端口解决了连接错误；对于无法热更新的问题，提供了修改文件的方法。强调了电脑配置和Android SDK、Java环境的重要性，同时建议使用Genymotion等快速模拟器替代官方模拟器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在做react-native开发，这东西是facebook弄出来的，底下员工用的都是mac，所以react-native生来对于IOS支持很好，一开始也只支持IOS开发，后来才加入了Android。
而这也就使得facebook在对Android平台的维护和支持上，没有对IOS那么好，坑比较多。
别问我是怎么知道的。。。

为了避免后来人继续踩坑，同时也给自己做个记录，我就把自己这几天的坑先记下来再说。

1. 模拟器或者真机的调试问题

我遇到的坑，主要就是在真机调试上，总是连不上。
开机一片红，主要问题有两个:

1. Could not get BatchedBridge,make sure your bundle is packaged correctly
2. The development server returned response error code:404

这两个问题其实是一样的，刚一启动的时候，报第一个错，reload之后，报第二个错，这就是电脑和手机的端口没对应上。
刚开始的时候，我无论是改ip还是建立什么assets文件夹都没用，最后捣鼓了几天，查阅无数治疗，甚至把node_mudule文件中的模块文件都一个个看了一边，终于找到了答案，很简单。
首先，如果是真机调试，保证电脑和手机在同一个局域网下，电脑直接开wifi，手机连上就行，然后自己指定ip和端口号，只需要一条命令：

把
react-native start
换成
react-native start --host 192.168.155.1 --port 8081

这个配置源码见于\node_modules\react-native\local-cli\server\servcer.js

其中：

192.168.155.1是你电脑的ip，这和你自己的电脑有关，使用ipconfig查看即可。
port是你指定的端口，随便填。

敲完了这条命令之后，什么都不用改，什么文件夹都不用加，直接按着步骤走，另开一个控制台，敲react-native run-android。

这个时候，你可能看到控制台会输出一条黄色的警告JS server is not regnized之类的，不用管，这个是因为你修改了ip，和它默认的locahost不一样，所以它才会跳出来的这句话，其实看它的源代码，就是在\node_modules\react-native\local-cli\runAndroid\runAndroid.js中，这条警告就只是单纯的判断而已，屁用没有。

不过，如果你看着不舒服，可以直接改它的源码。
进入项目根目录，就是有package.json和node_modules的那个目录，进入\node_modules\react-native\local-cli\util\isPackagerRunning.js，在isPackagerRunning.js这个文件中修改它的判断函数就行了，比如我的修改成了
return fetch('http://192.168.155.1:8081/status')，根据你自己的ip和port该就行了，改完之后，就不会出现黄色警告了。
当然，如果你以后要换一个ip或者port，还是不想看到黄色警告，那么还得改一次。

等手机安装完成后，手机上一开始肯定是报错的，不用管，直接摇晃手机弹出一个悬浮界面，选择Dev Settings，再选择Debug server host & port for device，在弹出的输入框中输入你的ip和端口号，比如我这里输入的是192.168.155.1:8081，修改完之后，返回去再摇晃手机，弹出悬浮界面，点击Reload即可。

没错，就是这么简单，不用增加什么assets文件夹，也不用设置什么.sh，也不用管什么bundle，只要一条命令！

还有一点，就是保证你的设置一直是连着的，使用adb devices可以查看连接设备，如果offline了，那么就拔掉USB重连，或者重启模拟器

2. 无法热更新问题

这个问题也比较简单，修改文件即可。

  进入`\node_modules\react-native\packager\react-packager\src\node-haste\FileWatcher\index.js`，

  在这个文件中，找到`const MAX_WAIT_TIME =120000;`这一句，

  修改成`const MAX_WAIT_TIME =360000;`，

  这个`360000`也不是固定的，越大越好！

如果以上还是不行，那么摇晃手机，开启热更新、开启JS Minify，如果还不行，输入adb reverse tcp:8081 tcp:8081
若是都不行，全部重启一遍，多试几遍，基本上就差不多了。
如果react-native start之后，控制台不立即编译，导致手机加载超时，可以先在电脑浏览器上打开http://192.168.155.1:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false地址，提前编译一遍
另外，我还发现了一个问题，那就是电脑配置低真是硬伤啊。

最后那个RN官网上说的安装Android Studio的步骤，其实完全可以跳过，那个东西安不安装是无所谓的，直接用命令启动就行，但是Android SDK 、Java环境等是必须要配置的
如果你电脑配置还可以，也想用Android Studio上自带的模拟器，那么可以安装一下，但是那个自带的模拟器实在是太慢了，运气不好等上半小时都有可能，所以推荐用其他的模拟器，比如genymotion.