目标平台:Android。
按照官网教程搭建开发环境(RN中文网教程:http://reactnative.cn/docs/0.48/getting-started.html#content)。
Win 10:因为目前只开发android版本,所以windows就可以。很多文档以及教程都是针对macOS上的开发,用到windows上有时会出现一些问题,这个需要稍微注意下。
Visual Studio Code: 安装插件
React Native Tools
,用于运行、调试应用,语法提示。-
Android Studio 模拟器:使用
Nexus S
,因为这个模型是有菜单键的,高版本的模拟器通常没有。 使用快捷键Ctrl+M
也可以打开菜单栏。如果使用的IDE不是Android Studio,模拟器运行起来就可以关掉Android Studio了,不会影响模拟器。
-
Reload:重新加载。将js代码部分重新生成bundle,然后传输给模拟器或手机。有人说快捷键是
ctrl+R
,但我发现不好使,实际上是连按R键... - Debug JS Remotely:启动JS远程调试功能。此时Chrome会被打开,同时会创建一个 http://localhost:8081/debugger-ui Tab页。(我的情况是不会自动创建tab页,需要手动打开页面)
- Enable Live Reload:动态加载。当js代码发生变化后,React Native会自动生成bundle然后传输到模拟器或手机上。
- Enable Hot Reloading:热加载。每次保存代码时Hot Reloading功能便会生成此次修改代码的增量包,然后传输到手机或模拟器上以实现热加载。相比 Enable Live Reload需要每次都返回到启动页面,Enable Live Reload则会在保持程序状态的情况下,就可以将最新的代码部署到设备上。
- Toggle Inspector:在模拟器中查看组件样式。不怎么好用。
-
Reload:重新加载。将js代码部分重新生成bundle,然后传输给模拟器或手机。有人说快捷键是
Genymotion 模拟器:安装了但是感觉跟Android Studio模拟器差不多。
Chrome 开发者工具:调试JS代码。在模拟器中打开菜单栏,点击
Debug JS Remotely
,Chrome会自动打开一个标签页,如果没有自动打开,则直接访问http://localhost:8081/debugger-ui。F12
打开Chrome开发者工具,主要看source
标签中的代码,可以添加断点调试。
-
React Developer Tools:可以用来看组件结构,props,state等。使用命令
npm install -g react-devtools
安装。一开始安装有问题,启动的时候报错。
后来看到RN中文网上的说明,于是把node_modules文件夹里react-devtools
和electron
删掉,然后npm先安装electron
,再安装react-devtools
就好了。
react-devtools依赖于electron,而electron需要到国外服务器下载二进制包,所以国内用户这一步很可能会卡住。此时请在环境变量中添加electron专用的国内镜像源:ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/",然后再尝试安装react-devtools。
参考链接
- RN中文网 调试:http://reactnative.cn/docs/0.48/debugging.html#content
- React Native调试技巧与心得:http://www.cnblogs.com/gaosheng-221/p/6954434.html