/ react native

React Native跨平台移动应用开发实战 - 搭建开发和调试环境

本文隶属于文章系列 React Native跨平台移动应用开发实战 ,讲解RN开发和调试环境的搭建。开发和调试环境的易用性对后续的工作效率影响很大,值得花时间来准备。由于笔者是Mac电脑,因此下文如无特别说明,都是在Mac OS X环境下的操作。

  1. 安装开发工具
  2. 在设备上运行
  3. Dev域名配置
  4. Debugging

安装开发工具

RN开发工具包括:

  • node 运行打包服务Packager及各种JS工具
  • watchman 检测文件修改
  • react-native-cli RN命令行工具,功能包括启动Packager、在模拟器或设备上运行应用、链接原生组件库、打印应用日志、打包发布包等
  • Xcode iOS应用开发IDE
  • Android Studio 安卓应用开发IDE

详细的安装步骤在官网有详细说明,Getting Started,这里不再赘述。安装好开发工具后执行下面的命令来初始化项目并在模拟器里试运行:

> react-native init zaiqiuchang
> cd zaiqiuchang
> npm install
> react-native run-ios # for ios
> react-native run-android # for android

也可通过Xcode或Android Studio来启动模拟器运行。
注意,在Mac系统里,安卓模拟器如果启用了HAXM优化,会跟Docker冲突,两者只能同时运行一个。具体可查看笔者提交给Docker的Issue Docker for Mac conflict with Android emulator

在设备上运行

iOS
打开Xcode,使用数据线连接电脑和iPhone,然后选择Device为连接上的iPhone,运行即可。更多请参考官方文档, Runing on iOS Device

iOS 9之后默认只允许HTTPS请求,但在开发过程中没必要使用HTTPS,可以在Info.plist文件里添加以下内容来允许HTTP请求。

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

Android
首先请按官方文档完成配置,Runing on Android Device ,手机必需打开开发者模式。使用USB数据线连接电脑和安卓手机(笔者使用的是红米3S),执行 adb devices 命令来确认是否已连接上。笔者在开发过程中发现手机时不时会掉线,需要断开重连。

MIUI优化会导致安装应用到设备上时失败,依次进入 设置 > 其它高级设置 > 开发者选项,找到“启用MIUI优化”选项并关闭。具体可参见RN Issue Failed to establish session

Dev域名配置

大多数的应用都需要请求服务器,开发过程中需要请求开发机。如果是在模拟器上运行,因为模拟器跟开发机在同一台电脑,使用localhost或127.0.0.1即可。但如果是在设备上运行,则需要使用开发机内网IP,并保证开发机和手机在同一个内网。使用IP的坏处是一旦开发机IP地址发生变化,需要随之修改代码。最好是给开发机分配一个Dev域名,并启用Dev域名解析,在开发机IP发生变化时,修改域名解析配置即可。

笔者使用的是Dnsmasq来解决Dev域名解析问题。
首先,使用brew包管理工具来安装,brew install dnsmasq
然后,打开配置文件“/usr/local/etc/dnsmasq.conf”,找到如下配置项并修改。该修改使得所有以dev结束的域名解析到IP 127.0.0.1。如果是在设备上调试应用,则IP设为开发机内网IP。Dev域名不一定非得使用dev,可以是任何你想用的域名。修改完成后重启Dnsmasq服务,sudo brew services restart dnsmasq

# Add domains which you want to force to an IP address here.
# The example below send any host in double-click.net to a local
# web-server.
address=/dev/127.0.0.1

最后,修改代码配置里的请求域名为Dev域名,比如“api.zqc.dev”,并修改手机无线网络的DNS为开发机IP,安卓手机需要启用静态IP后才能修改DNS。
这样配置后所有手机的域名解析请求会经过电脑,电脑如果发现是Dev域名则直接按配置解析,否则才会去请求真实的DNS服务器。

Debugging

运行iOS模拟器时按键 Command + D,安卓模拟器按键 Command + M调出Debug Menu,在设备上运行时晃动设备即可。详细说明可参考官方文档,Debugging

  • Reload 从Packager重新获取最新JS代码,也可直接按键 Command + R,无需先调出Debug Menu。
  • Debug JS Remotely 在Chrome浏览器里调试JS代码,这个时候JS代码其实是在Chrome里运行,当然也就能够用上Chrome的Developer Tools。
  • Enable Live Reload 在代码发生修改时自动Reload。
  • Enable Hot Reloading 相比Live Reload,Reload前后可以保持应用状态
  • Show Inspector 类似Developer Tools的Inspect Elements,Debug页面结构和样式时非常有用
  • Show Perf Monitor 显示关键性能指标,比如内存使用大小、主线程和JS线程的帧率

只要不修改原生代码,就可以通过Reload来查看新的修改效果,无需重新编译。开发效率因此得到非常大的提升,这也是RN开发相比原生开发的一大优势。