React Native基础&入门教程：调试React Native应用的一小步

React Native(如下简称RN)为传统前端开发者打开了一扇新的大门。其中，使用浏览器的调试工具去Debug移动端的代码，无疑是最吸引开发人员的特性之一。

试想一下，当你在手机屏幕按下一个按钮，处理事件的代码就能够当即在浏览器的调试工具里进行断点调试，并且每当你对代码进行修改，界面即可以完成快速地重载，省去昂长的编译时间，这会是多么提升工做效率。

传统的Web前端开发人员天然很熟悉浏览器的调试工具，可是对于如何将其在RN中使用以便和移动端结合起来，也许会至关陌生。这也成为了一些开发者跨入RN移动开发大门的第一道小门槛。

本文是笔者一边参考官方文档，一边摸索RN调试过程的记录。但愿可以帮助新手开发者走出一小步，更快地迈过这道门槛。

在开始以前，你须要搭建好本地开发环境，并有一部Android 5.0版本以上的手机可供链接至电脑。

首先，使用官方工具react-native-cli建立好一个初始化的工程，并安装好依赖。

安装的命令为“react-native init DebugTest”（DebugTest为咱们此次的项目名称）

安装完成后，就会多出一个名为DebugTest项目文件夹，文件夹内结构以下：

让咱们把项目运行起来。我这里是在Windows下开发Android平台的应用，而且在此以前，已经用USB线链接好了一台Android版本7.1.1的真机。

运行项目的方法，就是进入DebugTest项目目录，此时执行命令行react-native run-android。注意，这里启动时会新弹出另外一个窗口，用于在8081端口启动一个叫作Metro Bundler的服务，这个窗口在开发时是须要保持运行着的。

同时，能够看到原cmd命令行窗口，显示在真机上安装了apk，并自动对8081端口进行了某种映射，使真机上的应用和咱们将要调试的代码创建了动态的关联。这个过程会比较消耗开发者电脑的系统资源，耐心等待一下子就好。

当Metro Bundler窗口显示index.js的映射进度达到100%时，手机上就能够看到默认的应用界面了。

同时，咱们也能够退出应用，在手机的桌面上找到这个安装好的应用。这里，它的名字就是DebugTest，图标是一个默认的安卓样子。

咱们进入这个应用，这时若是摇一摇手机，会弹出调试相关的设置：

Reload就是重刷整个应用，相似于在浏览器的F5刷新。

Debug JS Remotely这个咱们先留一个悬念，待会再来看。

先看看Enable Live Reload和Enable Hot Reloading。这两个均可以实如今代码保存时自动更新界面，它们区别是：Live Reload会重刷整个界面，至关于手动执行一次Reload。而Hot Reloading控制得更精准，它不会重刷整个界面，只会更新修改代码时影响的那个范围。官方文档里描述的是：This will allow you to persist the app's state through reloads. 也就是说，Hot Reloading时整个应用的状态是不会改变的，页面也是不会整个重刷的。有趣的是，与Live Reload对比，Hot Reloading的Reloading这个正在进行时的语法，也彷佛意味着Hot Reloading是当程序正在运行时去热乎乎地替换。

也许是由于各类 Reloading过于强大，它有时会出一点问题，好比在开启Live Reload或者Hot Reloading后，偶尔代码错误时手机上弹出的红屏界面在代码修改好后仍然不能恢复，这种时候，就须要手动Reload界面才能解决。

让咱们只是Enable Live Reload，而后从react-native引入Button，在View里加上一个按钮。

这个时候，保存代码。手机界面确实当即就变化了！说明Live Reload确实生效了。

不过，不是咱们想要的界面，而是出现红屏错误提示。

不用怕，遇到问题很正常。这时，能够从头细心阅读错误提示，发现它指出The title prop of a Button must be a string，而且这个error is located at: in Button (at App.js:37)。根据这个线索，咱们看到App.js的第37行，正是刚才添加的Button代码。

查阅文档发现，在RN里，Button组件有许多属性，其中onPress和title这两个属性是required的，也就是必需要有。

因此咱们修改代码，

保存，手机界面就刷新了，并显示出刚才添加的Button。

这里还有一小点值得注意，若是只给Button里的title设了值，而没有给onPress设置，界面不会出红色错误，而是在最下面出现一条黄色警告。仔细看，会发现其实这两个属性的Type不同。由此可知，当须要的类型是string而实际是undefined时，会报error，而须要的类型是function而实际是undefined时，只会报warnning。

同时能够看到，在上面的代码中，当按钮按下时，会调用一个打log的事件。可是打出的log在哪儿能够看到呢？

有两种方法。 第一种是在命令行显示，在项目当前目录（注意，必定要在项目当前目录）再启动一个新命令行窗口，输入

就能够在最下面看到输出的内容了，它不只能够实时反馈现有的输入，还保存了以前的输入。好比，下面三次输入，前两次输入是在以前尚未开启这个命令行窗口时按下的。

也许你会想：我不是想在命令窗口看到输出，而是想可以在浏览器里那样看到输出，甚至断点调试。这就是查看log的第二种方法。

回到本文的初衷。让咱们回头再看看调试设置界面中的Debug JS Remotely选项，如今点击它。这时会弹出Chrome的一个标签（固然，本地须要预先安装有Chrome）。

注意这里的Status：Debugger session #0 active就表示程序与该页面成功创建链接了。

这个时候在浏览器开发者工具的调试窗口，也能看到打出的log。并且它还能够更进一步地进行断点调试。

为更好地尝试调试功能，咱们修改一下代码，添加一个sayHello方法输出log。

保存，和预想的同样，页面刷新了，由于Live Reload。

如同调试Web前端代码同样，咱们打开浏览器的开发者工具，找到代码文件，并在sayHello函数里打一个断点。这个时候，按下手机上的Test按钮，能够看到程序执行到断点停下了，这与调试网页代码是多么类似：

不过，与调试纯网页代码有两点不一样。

第一，浏览器的页面上看不到应用界面，只能在手机上看到界面。

第二，手机上的界面在程序被断住的状况下，仍然能够接收事件。举个例子，就在此时，手机上该应用的界面表面上没什么反应，可是，若是你再屡次按下Test按钮，事件都会被记住，到时候会挨个响应。只是如今程序断在了第一次按下按钮的时候。

咱们让程序继续（若是在断点期间屡次按下按钮，会有屡次被断住）。

咱们按下了6次，调试工具下也显示出6次输出。这是与调试网页时的不一样：当调试网页时，一旦执行到断点，浏览器的页面其实就不可点击了。

到这一步，是否是以为使用RN开发也没有那么难呢？

至于Toggle Inspector, Show Perf Monitor, Start/Stop Sampling Profiler和Dev Settings，咱们暂时能够不用管它们。

目前已经知道了调试设置中Remote JS Debugging, Live Reload和 Hot Reloading。相信咱们已经能够比较从容地Debug简单的 RN应用了。这里以Windows下的Android为例，其实在Mac下开发iOS也是类似的。

但愿本文的分享对尝试RN的新手朋友有所帮助。若是你们对下篇想讲的内容有本身的想法，请留言告诉我，咱们必定会认真考虑。

移动端应用开发利器：

SpreadJS纯前端表格控件、WijmoJS纯前端控件集为您的移动应用带来更加灵活的操做体验和更佳美观的外观风格，欢迎下载。

扩展阅读：

纯干货分享：如何在 React 框架中使用SpreadJS