并且每当你对代码进行修改

React Native基础&入门教程:调节和测验React Native应用的一小步

2018/07/04 · JavaScript
· React Native

初稿出处:
葡萄干城控件   

React
Native(以下简称奥迪Q7N)为理念前端开采者张开了一扇新的大门。个中,使用浏览器的调整工具去Debug移动端的代码,无疑是最吸引开拓人士的特色之一。

试想一下,当你在手提式有线电话机显示屏按下多个开关,处管事人件的代码就足以立刻在浏览器的调解工具里开始展览断点调节和测验,何况每当你对代码举办改动,分界面便足以实现神速地重载,省去昂长的编写翻译时间,那会是何等进步级程序猿作功用。

历史观的Web前端开辟职员本来很纯熟浏览器的调节和测量试验工具,可是对于如何将其在RubiconN中央银行使以便和移动端结合起来,恐怕会一定面生。那也改成了部分开拓者跨入昂CoraN移动支付大门的第一道小诀窍。

本文是笔者一边参谋官方文书档案,一边搜求奥德赛N调节和测量检验进度的笔录。希望能够扶助菜鸟开拓者走出一小步,更加快地迈过那道门槛。

在初始在此以前,你需求搭建好本地开辟景况,并有一部Android
5.0本子以上的无绳电话机可供连接至计算机。

首先,使用官方工具react-native-cli创立好三个开头化的工程,并安装好依靠。

设置的授命为“react-native init
DebugTest”(DebugTest为我们此番的项目名称)

安装到位后,就能够多出二个名叫DebugTest项目文件夹,文件夹内组织如下:

www.yabovip4.com 1

图1. 项目开端结构

让大家把项目周转起来。小编那边是在Windows下开荒Android平台的利用,並且从前,已经用USB线连接好了一台Android版本7.1.1的真机。

运行项目标艺术,正是步入DebugTest项目目录,此时推行命令行react-native
run-android。注意,这里运转时会新弹出另三个窗口,用于在8081端口运行一个称得上Metro
Bundler的服务,那些窗口在付出时是索要保持运转着的。

www.yabovip4.com 2

图2. Metro Bundler 窗口

亚搏app官方网站,何况,能够看看原cmd命令行窗口,显示在真机上设置了apk,并自行对8081端口举行了某种映射,使真机上的施用和我们将在调节和测量检验的代码组建了动态的关联。那几个进程会相比消耗开垦者计算机的系统能源,耐心等待一会儿就好。

www.yabovip4.com 3

图3. 原cmd命令行窗口

当Metro
Bundler窗口显示index.js的投射进程抵达百分之百时,手提式有线电话机上就能够看到暗中认可的行使分界面了。

www.yabovip4.com 4

www.yabovip4.com,图4. 私下认可使用分界面

与此同不经常间,大家也能够退出应用,在二弟大的桌面上找到这一个装置好的行使。这里,它的名字就是DebugTest,Logo是贰个默许的安卓样子。

咱俩步向那么些应用,那时借使摇一摇手提式有线电话机,会弹出调节和测验相关的装置:

www.yabovip4.com 5

图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里加上贰个开关。

www.yabovip4.com 6

图6. 增多按键

那年,保存代码。手提式有线电话机分界面确实立刻就改换了!表达Live
Reload确实生效了。

并且每当你对代码进行修改。可是,不是我们想要的分界面,而是现身红屏错误提醒。

www.yabovip4.com 7

图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代码。

查看文书档案开采,在RubiconN里,Button组件有一些不清属性,当中onPress和title那三个属性是required的,也正是必须求有。

www.yabovip4.com 8

图8. 官方文书档案关于Button的节选

就此我们修改代码,

www.yabovip4.com 9

图9. 补全Button必要的本性

封存,手机分界面就刷新了,并出示出刚才增加的Button。

www.yabovip4.com 10

图10. 常规运营

此地还大概有点点值得注意,假使只给Button里的title设了值,而并未给onPress设置,分界面不会出玛瑙红错误,而是在最上边出现一条黑古铜色警告。细心看,会发掘实际这两天性子的Type差异样。由此可见,当要求的品种是string而实际上是undefined时,会报error,而急需的花色是function而实质上是undefined时,只会报warnning。

同一时间能够旁观,在上头的代码中,当开关按下时,会调用八个打log的平地风波。可是打出的log在哪儿能够看出吗?

并且每当你对代码进行修改。有两种办法。
第一种是在命令行展现,在品种当前目录(注意,必须要在品种当前目录)再开发银行几个新命令行窗口,输入

www.yabovip4.com 11

并且每当你对代码进行修改。就可以在最上面看到输出的剧情了,它不但能够实时举报现成的输入,还保存了从前的输入。举个例子,下边二次输入,前四遍输入是在前头还尚未拉开这几个命令行窗口时按下的。

www.yabovip4.com 12

只怕你会想:小编不是想在命令窗口看到输出,而是想能够在浏览器里那么看到输出,以至断点调节和测量检验。那正是查看log的第三种办法。

归来本文的初衷。让大家回头再看看调节和测量试验设置分界面中的Debug JS
Remotely选项,以后点击它。那时会弹出Chrome的二个标签(当然,本地须求事先安装有Chrome)。

www.yabovip4.com 13

图11. 开发Remote JS Debugging后弹出的浏览器标签

在意这里的Status:Debugger session #0
active就象征程序与该页面成功营造连接了。

其有时候在浏览器开辟者工具的调弄整理窗口,也能看出打出的log。何况它还是能够更上一层楼地拓展断点调节和测验。

为越来越好地品尝调节和测量检验功效,我们修改一下代码,增加三个sayHello方法输出log。

www.yabovip4.com 14

图12. 再一次绑定onPress事件

保存,和预期的大同小异,页面刷新了,因为Live Reload。

犹如调节和测量检验Web前端代码同样,大家开发浏览器的开垦者工具,找到代码文件,并在sayHello函数里打贰个断点。那一年,按出手提式有线电话机上的Test开关,能够看来程序实践到断点停下了,那与调整网页代码是多么相似:

www.yabovip4.com 15

图13. 浏览器上的断点调节和测验

不过,与调整纯网页代码有两点不一样。

先是,浏览器的页面上看不到应用分界面,只好在手提式有线电话机上观察分界面。

第二,手提式有线电话机上的分界面在程序被断住的意况下,如故能够接过事件。举个例子,就在那时候,手提式无线电电话机上该应用的分界面表面上没什么影响,可是,就算你再频仍按下Test按键,事件都会被铭记,到时候会挨个响应。只是未来程序断在了第壹次按下按键的时候。

大家让程序继续(假诺在断点期间往往按下按键,会有频仍被断住)。

www.yabovip4.com 16

图14. 浏览器调整台出口

我们按下了6次,调节和测量试验工具下也显得出6次输出。那是与调度网页时的例外:当调节和测量试验网页时,一旦奉行到断点,浏览器的页面其实就不足点击了。

到这一步,是或不是感觉采用Mercedes-A名爵N开采也从不那么难吗?

至于Toggle Inspector, Show Perf Monitor, Start/Stop Sampling
Profiler和Dev Settings,大家暂且可以不用管它们。

脚下早已驾驭了调和设置中Remote JS Debugging, Live Reload和 Hot
Reloading。相信我们曾经能够比较从容地Debug简单的
EscortN应用了。这里以Windows下的Android为例,其实在Mac下开荒iOS也是相似的。

梦想本文的分享对品味福特ExplorerN的菜鸟朋友有所帮助。即便我们对下篇想讲的剧情有和好的主见,请留言告知自身,大家料定会认真考虑。

 

1 赞 收藏
评论

www.yabovip4.com 17

发表评论

电子邮件地址不会被公开。 必填项已用*标注