最近在做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.