React Native(以下简称RN)为传统前端开发者打开了一扇新的大门。其中,使用浏览器的调试工具去Debug移动端的代码,无疑是最吸引开发人员的特性之一。
试想一下,当你在手机屏幕按下一个按钮,处理事件的代码就可以立即在浏览器的调试工具里进行断点调试,而且每当你对代码进行修改,界面便可以完成快速地重载,省去昂长的编译时间,这会是多么提高工作效率。
传统的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 run-android。注意,这里启动时会新弹出另一个窗口,用于在8081端口启动一个叫做Metro Bundler的服务,这个窗口在开发时是需要保持运行着的。
图2. Metro Bundler 窗口
同时,可以看到原cmd命令行窗口,显示在真机上安装了apk,并自动对8081端口进行了某种映射,使真机上的应用和我们将要调试的代码建立了动态的关联。这个过程会比较消耗开发者电脑的系统资源,耐心等待一会儿就好。
图3. 原cmd命令行窗口
当Metro Bundler窗口显示index.js的映射进度达到100%时,手机上就可以看到默认的应用界面了。
图4. 默认应用界面
同时,我们也可以退出应用,在手机的桌面上找到这个安装好的应用。这里,它的名字就是DebugTest,图标是一个默认的安卓样子。
我们进入这个应用,这时如果摇一摇手机,会弹出调试相关的设置:
图5. 调试设置界面
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里加上一个按钮。
图6. 添加按钮
这个时候,保存代码。手机界面确实立即就变化了!说明Live Reload确实生效了。
不过,不是我们想要的界面,而是出现红屏错误提示。
图7. 红屏错误提示
不用怕,遇到问题很正常。这时,可以从头细心阅读错误提示,发现它指出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的,也就是必须要有。
图8. 官方文档关于Button的节选
所以我们修改代码,
图9. 补全Button需要的属性
保存,手机界面就刷新了,并显示出刚才添加的Button。
图10. 正常运行
这里还有一小点值得注意,如果只给Button里的title设了值,而没有给onPress设置,界面不会出红色错误,而是在最下面出现一条黄色警告。仔细看,会发现其实这两个属性的Type不一样。由此可知,当需要的类型是string而实际是undefined时,会报error,而需要的类型是function而实际是undefined时,只会报warnning。
同时可以看到,在上面的代码中,当按钮按下时,会调用一个打log的事件。但是打出的log在哪儿可以看到呢?
有两种方法。 第一种是在命令行显示,在项目当前目录(注意,一定要在项目当前目录)再启动一个新命令行窗口,输入
就可以在最下面看到输出的内容了,它不仅可以实时反馈现有的输入,还保存了之前的输入。比如,下面三次输入,前两次输入是在之前还没有开启这个命令行窗口时按下的。
也许你会想:我不是想在命令窗口看到输出,而是想能够在浏览器里那样看到输出,甚至断点调试。这就是查看log的第二种方法。
回到本文的初衷。让我们回头再看看调试设置界面中的Debug JS Remotely选项,现在点击它。这时会弹出Chrome的一个标签(当然,本地需要预先安装有Chrome)。
图11. 打开Remote JS Debugging后弹出的浏览器标签
注意这里的Status:Debugger session #0 active就表示程序与该页面成功建立连接了。
这个时候在浏览器开发者工具的调试窗口,也能看到打出的log。而且它还可以更进一步地进行断点调试。
为更好地尝试调试功能,我们修改一下代码,添加一个sayHello方法输出log。
图12. 重新绑定onPress事件
保存,和预想的一样,页面刷新了,因为Live Reload。
如同调试Web前端代码一样,我们打开浏览器的开发者工具,找到代码文件,并在sayHello函数里打一个断点。这个时候,按下手机上的Test按钮,可以看到程序执行到断点停下了,这与调试网页代码是多么相似:
图13. 浏览器上的断点调试
不过,与调试纯网页代码有两点不同。
第一,浏览器的页面上看不到应用界面,只能在手机上看到界面。
第二,手机上的界面在程序被断住的情况下,仍然可以接收事件。举个例子,就在此时,手机上该应用的界面表面上没什么反应,但是,如果你再多次按下Test按钮,事件都会被记住,到时候会挨个响应。只是现在程序断在了第一次按下按钮的时候。
我们让程序继续(如果在断点期间多次按下按钮,会有多次被断住)。
图14. 浏览器控制台输出
我们按下了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 Native调试的第一步,特别是针对那些从传统Web前端开发转战RN的新手。 首先,确保你的开发环境已准备就绪,包括安装了React Native CLI(命令行工具)以及一部Android 5.0及以上版本的手机...
React Native Debugger是一款强大的开发工具,特别为在macOS平台上进行React和React Native应用的可视化调试而设计。它提供了丰富的功能,使开发者能够更有效地检查、调试和优化代码,尤其是在处理复杂的Redux状态...
根据《React Native零基础入门到项目实战》视频写的项目,主要包括实战项目。根据《React Native零基础入门到项目实战》视频写的项目,主要包括实战项目。
这个“ReactNative开发实例带你入门reactnative开发”的资源,显然是一个针对初学者的教程,旨在帮助他们理解并掌握React Native的基本概念、架构以及实际开发流程。 React Native的核心理念是“Learn Once, Write ...
React Native 不仅允许开发者为 iOS 和 Android 平台创建应用,还能共享大部分的代码基础,这对于想要同时发布到两个平台的应用开发者来说是一个巨大的优势。 知识点概览: 1. React Native 的概念和起源。 2. ...
JdApp是CSDN博客的一个... Add Tab 其他教程React Native入门——环境配置及Hello WorldReact Native入门——IDE及其他相关基础技术React Native入门——组件构成及生命周期简介效果: 标签:京东客户端
在30天学习React Native教程中,你将深入探索这个由Facebook推出的JavaScript框架,它允许开发者使用一套代码库构建原生的iOS和Android应用程序。React Native结合了React.js的组件化思想与移动平台的特性,提供了...
8.2 React Native 调试工具 147 8.3 JavaScript 之外的调试方法 152 8.4 测试代码 158 8.5 当你陷入困境 160 8.6 小结 160 第9章 学以致用 161 9.1 闪卡应用 161 9.2 模型与数据存储 168 9.3 使用Navigator ...
React Native是一种由Facebook开发的开源框架,用于构建原生移动应用程序。它允许开发者使用JavaScript和React库来编写可跨平台的iOS和Android应用,极大地提高了开发效率和代码复用性。React Native的核心理念是...
React Native 是一个由Facebook开发的开源框架,它允许开发者使用JavaScript和React库来构建原生移动应用程序。这个“React Native基础学习笔记”很可能是对这一跨平台开发技术的详细讲解和实践经验的汇总。React ...
《React Native小书》作为一本入门级别的开源书籍,旨在帮助初学者快速掌握React Native的基本概念、核心原理以及实际开发流程。 1. **React Native基础** React Native的核心理念是“Learn once, write anywhere...
《React+Native入门与实战》是一本专注于介绍React Native技术的书籍,由人民邮电出版社在2016年1月出版。React Native是Facebook推出的一款开源框架,它允许开发者使用JavaScript来构建原生的移动应用程序,实现了...
01.JavaScript基础 02.ECMAScript 新功能 03.React 基础 04.React 路由 05React Native基础知识 06.React Native进阶 07.R React Native高级 08ECMAScript 2105(es6) 09React Native视频教程-项目实战
总的来说,Expo XDE结合React Native,为开发者提供了一个高效、便捷的跨平台移动应用开发工具,降低了入门门槛,加速了项目开发进程。同时,随着React Native和Expo社区的不断发展,更多的功能和优化将不断引入,...
1. **React Native基础知识**:React Native是Facebook推出的一个开源框架,它允许开发者使用JavaScript和React来开发原生移动应用。React是Facebook的UI库,采用组件化思想,而React Native则是将其扩展到移动平台...
第3课3、手把手教React Native实战之flexbox布局(RN基础) 第4讲4、手把手教React Native实战之flexbox布局(伸缩属性) 第5讲5、手把手教React Native实战之盒子模型BoxApp 第6讲6、手把手教React Native实战之JSX入门...
React Native Page 是一款专为React Native平台设计的分页组件,它可以帮助开发者轻松地在原生移动应用中实现页面滑动切换的效果。React Native是一种由Facebook开发的开源框架,允许开发者使用JavaScript和React来...
React Native是一种开源框架,由Facebook开发并维护,用于构建原生移动应用程序。它允许开发者使用JavaScript和React库来编写代码,同时实现iOS和Android平台上接近原生的应用性能。本资源为"React Native跨平台移动...
本教程通过"Android和React Native混合开发Demo",将详细介绍如何在Android应用中集成React Native,实现原生代码与React Native组件之间的双向通信。 首先,Android原生加载RN页面是混合开发的基础。这涉及到在...