本地反应(以下简称RN)为传统前端开发者打开了一扇新的大门。其中,使用浏览器的调试工具去调试移动端的代码,无疑是最吸引开发人员的特性之一。
试想一下,当你在手机屏幕按下一个按钮,处理事件的代码就可以立即在浏览器的调试工具里进行断点调试,而且每当你对代码进行修改,界面便可以完成快速地重载,省去昂长的编译时间,这会是多么提高工作效率。
传统的Web前端开发人员自然很熟悉浏览器的调试工具,但是对于如何将其在RN中使用以便和移动端结合起来,也许会相当陌生。这也成为了一些开发者跨入RN移动开发大门的第一道小门槛。
本文是笔者一边参考官方文档,一边摸索RN调试过程的记录。希望能够帮助新手开发者走出一小步,更快地迈过这道门槛。
在开始之前,你需要搭建好本地开发环境,并有一部Android 5.0版本以上的手机可供连接至电脑。
首先,使用官方工具react-native-cli创建好一个初始化的工程,并安装好依赖。
安装的命令为“react-native init DebugTest”(DebugTest为我们这次的项目名称)
安装完成后,就会多出一个名为DebugTest项目文件夹,文件夹内结构如下:
图1所示。项目初始结构
让我们把项目运行起来。我这里是在Windows下开发Android平台的应用,并且在此之前,已经用USB线连接好了一台Android版安装7.1.1本的真机。
运行项目的方法,就是进入DebugTest项目目录,此时执行命令行react-native运行android。注意,这里启动时会新弹出另一个窗口,用于在8081年端口启动一个叫做地铁打包机的服务,这个窗口在开发时是需要保持运行着的。
图2所示。地铁打包机窗口
同时,可以看到原cmd命令行窗口,显示在真机上安装了apk,并自动对8081端口进行了某种映射,使真机上的应用和我们将要调试的代码建立了动态的关联。这个过程会比较消耗开发者电脑的系统资源,耐心等待一会儿就好。
图3所示。原cmd命令行窗口
当地铁打包机窗口显示index.js的映射进度达到100%时,手机上就可以看到默认的应用界面了。
图4所示。默认应用界面
同时,我们也可以退出应用,在手机的桌面上找到这个安装好的应用。这里,它的名字就是DebugTest,图标是一个默认的安卓样子。
我们进入这个应用,这时如果摇一摇手机,会弹出调试相关的设置:
图5所示。调试设置界面
重新加载就是重刷整个应用,类似于在浏览器的F5刷新。
远程调试JS这个我们先留一个悬念,待会再来看。
先看看启用重载允许热重载和生活。这两个都可以实现在代码保存时自动更新界面,它们区别是:生活重新加载会重刷整个界面,相当于手动执行一次重新加载,而热重载控制得更精准,它不会重刷整个界面,只会更新修改代码时影响的那个范围。官方文档里描述的是:这将允许您坚持通过重新加载应用程序的状态。也就是说,热重载时整个应用的状态是不会改变的,页面也是不会整个重刷的。有趣的是,与生活重新加载对比,热重载的重载这个正在进行时的语法,也似乎意味着热重载是当程序正在运行时去热乎乎地替换。
也许是因为各种重载过于强大,它有时会出一点问题,比如在开启生活重新加载或者热重载后,偶尔代码错误时手机上弹出的红屏界面在代码修改好后仍然不能恢复,这种时候,就需要手动重载界面才能解决。
让我们只是让生活重新加载,然后从react-native引入按钮,在视图里加上一个按钮。
