入门教程,Native应用的一小步

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

2018/07/04 · JavaScript
· React Native

原稿出处:
葡萄干城控件   

React
Native(以下简单的称呼EnclaveN卡塔尔为思想前端开荒者展开了黄金时代扇新的大门。个中,使用浏览器的调养工具去Debug移动端的代码,无疑是最吸引开采职员的性状之黄金时代。

试想一下,当您在四弟大显示屏按下贰个按键,处总管件的代码就能够及时在浏览器的调理工科具里举办断点调节和测量试验,况兼每当你对代码进行修正,分界面便足以做到高效地重载,省去昂长的编写翻译时间,那会是多么升高级技术员作功用。

传统的Web前端开辟人士本来很熟知浏览器的调度工具,然而对于怎么将其在景逸SUVN中运用以便和活动端结合起来,可能会一定面生。那也改成了生机勃勃部分开辟者跨入揽胜N手机支付大门的第后生可畏道小秘技。

正文是我风度翩翩边参谋官方文书档案,黄金年代边探索PRADON调节和测量检验进度的笔录。希望能够扶持新手开荒者走出一小步,更加快地迈过那道门槛。

在起来从前,你供给搭建好地方开垦条件,并有黄金时代部Android
5.0版本以上的手提式有线电话机可供连接至计算机。

首先,使用官方工具react-native-cli创立好一个开首化的工程,并设置好依据。

安装的下令为“react-native init
DebugTest”(DebugTest为我们本次的项目名称)

安装达成后,就能多出二个名称叫DebugTest项目文件夹,文件夹内构造如下:

澳门新葡亰平台官网 1

图1. 门类起先构造

让我们把品种周转起来。笔者这里是在Windows下开荒Android平台的应用,並且以前,已经用USB线连接好了黄金年代台Android版本7.1.1的真机。

运行品种的艺术,就是步入DebugTest项目目录,那时推行命令行react-native
run-android。注意,这里运行时会新弹出另一个窗口,用于在8081端口运维叁个誉为Metro
Bundler的服务,这么些窗口在付出时是急需保险运转着的。

澳门新葡亰平台官网 2

图2. Metro Bundler 窗口

何况,能够见到原cmd命令行窗口,展现在真机上安装了apk,并自行对8081端口进行了某种映射,使真机上的施用和大家就要调节和测试的代码营造了动态的关联。那几个进程会相比较消耗开荒者Computer的系统财富,耐性等待一弹指间就好。

澳门新葡亰平台官网 3

图3. 原cmd命令行窗口

当Metro
Bundler窗口显示index.js的投射进度到达100%时,手提式有线电话机上就能够观察暗许的选用分界面了。

澳门新葡亰平台官网 4

图4. 暗中认可使用分界面

与此同期,大家也可以退出应用,在三弟大的桌面上找到那个装置好的行使。这里,它的名字正是DebugTest,Logo是叁个暗许的安卓样子。

咱俩步向这几个利用,那个时候假设摇蓬蓬勃勃摇手提式有线电话机,会弹出调节和测量试验相关的设置:

澳门新葡亰平台官网 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里加上四个开关。

澳门新葡亰平台官网 6

图6. 加多开关

以那个时候候,保存代码。手提式有线电话机分界面确实立即就成形了!表达Live
Reload确实生效了。

唯独,不是我们想要的分界面,而是现身红屏错误提醒。

澳门新葡亰平台官网 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代码。

翻看文书档案开掘,在大切诺基N里,Button组件有无数性质,此中onPress和title那二日天性是required的,也等于应当要有。

澳门新葡亰平台官网 8

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

因而大家更正代码,

澳门新葡亰平台官网 9

图9. 补全Button供给的性格

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

澳门新葡亰平台官网 10

图10. 正规运转

此地还可能有一丢丢值得注意,假诺只给Button里的title设了值,而并未有给onPress设置,分界面不会出冰雪蓝错误,而是在最下边现身一条石青警示。留神看,会发觉其实那八个性格的Type不等同。因而可以预知,当必要的品类是string而事实上是undefined时,会报error,而须要的类型是function而其实是undefined时,只会报warnning。

与此同期可以见见,在上头的代码中,当开关按下时,会调用叁个打log的平地风波。可是打出的log在何方能够看出啊?

有三种格局。
第生机勃勃种是在命令行展现,在类型当前目录(注意,必须求在项目当前目录)再起步一个新命令行窗口,输入

澳门新葡亰平台官网 11

就能够在最下边看看输出的内容了,它既能实时报告现成的输入,还保留了事情发生从前的输入。例如,上面叁次输入,前五次输入是在以前还一直不拉开那几个命令行窗口时按下的。

澳门新葡亰平台官网 12

大概你会想:笔者不是想在指令窗口看看输出,而是想可以在浏览器里那样见到输出,以至断点调节和测量检验。这便是翻开log的第三种方法。

回来本文的最初的心愿。让大家回头再看看调节和测量检验设置分界面中的Debug JS
Remotely选项,将来点击它。当时会弹出Chrome的一个标签(当然,本地要求事情未发生前安装有Chrome)。

澳门新葡亰平台官网 13

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

瞩目这里的Status:Debugger session #0
active就表示程序与该页面成功建设构造连接了。

这时在浏览器开辟者工具的疗养窗口,也能收看打出的log。何况它还足以更进一层地张开断点调节和测量试验。

为更加好地品尝调节和测验成效,我们校勘一下代码,增添一个sayHello方法输出log。

澳门新葡亰平台官网 14

图12. 重新绑定onPress事件

保存,和预期的相通,页面刷新了,因为Live Reload。

仿佛调节和测验Web前端代码类似,我们开荒浏览器的开荒者工具,找到代码文件,并在sayHello函数里打多个断点。此时,按入手提式有线话机上的Test按键,能够看看程序实行到断点停下了,那与调解网页代码是何等近似:

澳门新葡亰平台官网 15

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

但是,与调治纯网页代码有两点不一致。

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

其次,手提式有线电话机上的分界面在程序被断住的情景下,照旧能够收起事件。举例,就在这里刻,手提式有线电电话机上该行使的分界面表面上没什么影响,可是,倘使您再频繁按下Test开关,事件都会被记住,届期候会挨个响应。只是以后程序断在了第三回按下开关的时候。

大家让程序继续(若是在断点时期往往按下按键,会有一再被断住)。

澳门新葡亰平台官网 16

图14. 浏览器调节台出口

大家按下了6次,调节和测验工具下也显得出6次输出。那是与调度网页时的不及:当调节和测量检验网页时,一旦实行到断点,浏览器的页面其实就不可点击了。

到这一步,是或不是感到使用奥迪Q5N开辟也从未那么难啊?

至于Toggle Inspector, Show Perf Monitor, Start/Stop Sampling
Profiler和Dev Settings,我们如今能够不用管它们。

当下早就明白了调弄整理设置中Remote JS Debugging, Live Reload和 Hot
Reloading。相信我们早已能够相比较从容地Debug轻便的
翼虎N应用了。这里以Windows下的Android为例,其实在Mac下开采iOS也是经常的。

愿意本文的享用对品味安德拉N的新手朋友有所援助。借使我们对下篇想讲的内容有谈得来的主见,请留言告知笔者,我们必然会认真思虑。

 

1 赞 收藏
评论

澳门新葡亰平台官网 17

澳门新葡亰平台官网 ,React
Native为思想前端开辟者展开了风流倜傥扇新的大门。当中,使用浏览器的调节和测量检验工具去Debug移动端的代码,无疑是最吸引开垦人士的特征之生龙活虎。

试想一下,当您在小叔子大显示屏按下三个开关,处管事人件的代码就能够立时在浏览器的调节和测量试验工具里张开断点调节和测验,并且每当你对代码举行改进,分界面便得以做到高效地重载,省去昂长的编写翻译时间,那会是何其进步级技术员作作用。

古板的Web前端开拓职员本来很熟稔浏览器的调和工具,然则对于哪些将其在路虎极光N中运用以便和平运动动端结合起来,或然会一定素不相识。那也改为了有的开辟者跨入牧马人N线上支付大门的首先道小法门。

正文是小编大器晚成边参考官方文书档案,风流浪漫边查究PRADON调节和测量试验过程的记录。希望可以扶持新手开采者走出一小步,更加快地迈过这道门槛。

在起来在此之前,你必要搭建好位置开辟条件,并有风度翩翩部Android
5.0本子以上的手机可供连接至Computer。

先是,使用官方工具react-native-cli创造好叁个开始化的工程,并设置好依附。

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

设置到位后,就能多出叁个名字为DebugTest项目文件夹,文件夹内组织如下:

澳门新葡亰平台官网 18

图1. 类型始于布局

让我们把品种运行起来。作者那边是在Windows下开荒Android平台的使用,并且早先,已经用USB线连接好了大器晚成台Android版本7.1.1的真机。

运转项目的方式,正是跻身DebugTest项目目录,那时候实行命令行react-native
run-android。注意,这里运营时会新弹出另二个窗口,用于在8081端口运行叁个名称为Metro
Bundler的服务,这么些窗口在开垦时是索要保持运营着的。

澳门新葡亰平台官网 19

图2. Metro Bundler 窗口

並且,可以见到原cmd命令行窗口,展现在真机上设置了apk,并机关对8081端口进行了某种映射,使真机上的采纳和我们就要调节和测量检验的代码创建了动态的涉及。那个进度会相比较消耗开荒者Computer的系统财富,意志力等待转眼间就好。

澳门新葡亰平台官网 20

图3. 原cmd命令行窗口

当Metro
Bundler窗口展现index.js的投射进程达到100%时,手提式有线电话机上就能够见见暗中认可的施用分界面了。

澳门新葡亰平台官网 21

图4. 暗许使用分界面

同临时候,大家也能够退出应用,在四哥大的桌面上找到那个装置好的施用。这里,它的名字就是DebugTest,Logo是一个暗中同意的安卓样子。

大家步向这么些应用,那时假如摇生机勃勃摇手机,会弹出调节和测量检验相关的装置:

澳门新葡亰平台官网 22

图5. 调节和测验设置分界面

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

Debug JS
Remotely这几个我们先留贰个悬念,待会再来看。有须求沟通学习Android开拓的能够加大家QQ群:936903570

先看看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里加上叁个按键。

澳门新葡亰平台官网 23

图6. 增多开关

当时,保存代码。手提式有线电话机分界面确实顿时就调换了!表明Live
Reload确实生效了。

只是,不是大家想要的分界面,而是现身红屏错误提醒。

澳门新葡亰平台官网 24

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

查看文书档案开采,在奥迪Q7N里,Button组件有成百上千属性,此中onPress和title那多个个性是required的,也正是必须求有。

澳门新葡亰平台官网 25

发表评论

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