react native调试

启动

安装较为稳定的版本：0.59.9（如果你想用最新的，必须配置访问外国网站）

react-native init 项目名 --version 0.59.9

初始化完毕后，就可以运行了。

进入到你的项目（绝对路径不要带中文）。

ios

• ios执行react-native run-ios

该命令会调起Xcode的自带iPhone模拟器。并单独开启一个服务窗口：

经过漫长的编译之后，看到：

说明项目创建成功。

android

• 安卓执行react-native run-android

接下来把安卓模拟器也配置好：

用android studio打开rn项目，

就可以打开模拟器。

这个时候检测adb-devices会发现多出一条记录，那便是模拟器的标识。

有了adb连接，就可以使用react-native run-android了。

看到以下界面，启动成功

Developer Menu

Developer Menu是React Native给开发者定制的开发者菜单，来帮助开发者调试React Native应用。

如何在模拟器器上开启Developer Menu

Android模拟器:

可以通过 Command⌘ + M 快捷键来快速打开Developer Menu。也可以通过模拟器上的菜单键来打开。如果是真机调试，也可以”摇一摇”打开。

心得:高版本的模拟器通常没有菜单键的，不过Nexus S上是有菜单键的，如果想使⽤用菜单键，可 以创建⼀一个Nexus S的模拟器。

在iOS上开启：可以通过 Command⌘ + D 快捷键来快速打开Developer Menu。

以下对开发者菜单进行分类解释：

reload

Reload 选项，单击 Reload 可让React Native重新加载js。对于iOS模拟器器你也可以通过 Command⌘ + R 快捷键来替代，对于Android模拟器器可以通过双击 r 键来加载js。

提示:如果 Command⌘ + R 无法使你的iOS模拟器器加载js，则可以通过选中Hardware menu中 Keyboard选项下的 “Connect Hardware Keyboard” 。

Enable Live Reload

该选项提供了React Native动态加载的功能。当你的js代码发⽣生变化后，React Native会自动⽣成 bundle,然后传输到模拟器或手机上 。

Errors and Warnings

在development模式下，js部分的Errors 和 Warnings会直接打印在⼿机或模拟器屏幕上，分别以红屏和黄屏展示。

errors：React Native程序运行时出现的Errors会被直接显示在屏幕上，以红⾊的背景显示，并会打印出错误信 息。你也可以通过 console.error() 来⼿手动触发Errors。

不要过分相信报错信息！因为错误定位经常是不准确的。

Warnings ：React Native程序运行时出现的Warnings也会被直接显示在屏幕上，以黄⾊的背景显示，并会打印出警 告信息。你也可以通过 console.warn() 来⼿手动触发Warnings。

程序员通常是不会重视警告的，况且警告特别烦人。你可以通过 console.disableYellowBox = true 来手动禁⽤用Warnings的显示，或者通过 console.ignoredYellowBox = ['Warning: ...'];来忽略相应的Warning 。

Debug JS Remotely

浏览器对于前端来说实在是太常用的工具了。如果能在类似浏览器环境下做开发，会非常惬意。

因此rn提供了Debug JS Remotely功能：顾名思义，就是远程js调试。点击之后会调起chrome，打开了<http://localhost:8081/debugger-ui/>地址。

如图所示，开发者可以在浏览器环境下做断点调试。