Native应用的一小步,Native基础入门之调试React
分类:计算机知识

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

2018/07/04 · JavaScript · React Native

原稿出处: 赐紫樱珠城控件   

React Native(以下简称LX570N)为观念前端开垦者打开了一扇新的大门。当中,使用浏览器的调弄整理工具去Debug移动端的代码,无疑是最吸引开垦人士的表征之一。

试想一下,当您在四弟大荧屏按下叁个开关,处总管件的代码就能够立时在浏览器的调试工具里举行断点调节和测量试验,何况每当你对代码举行修改,分界面便落实急速地重载,省去昂长的编写翻译时间,这会是多么提升级程序员作效能。

历史观的Web前端开拓职员本来很熟知浏览器的调理工科具,不过对于什么将其在奇骏N中应用以便和平运动动端结合起来,也许会一定目生。那也变为了部分开垦者跨入HighlanderN移动支付大门的首先道小诀要。

本文是作者一边参照他事他说加以考察官方文档,一边探究大切诺基N调节和测验进度的笔录。希望能够扶助菜鸟开辟者走出一小步,更加快地迈过那道门槛。

在始发在此以前,你须求搭建好本地开采情况,并有一部Android 5.0本子以上的无绳电话机可供连接至Computer。

首先,使用官方工具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的炫彩进程到达百分之百时,手提式有线电话机上就能够看来暗许的利用分界面了。

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

查阅文书档案开采,在CRUISERN里,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次输出。那是与调度网页时的不等:当调节和测量检验网页时,一旦实施到断点,浏览器的页面其实就不行点击了。

到这一步,是或不是以为使用RubiconN开拓也从未那么难啊?

有关Toggle Inspector, Show Perf Monitor, Start/Stop Sampling Profiler和Dev Settings,大家不常能够不用管它们。

当下早就知道了调度设置中Remote JS Debugging, Live Reload和 Hot Reloading。相信大家已经能够相比从容地Debug简单的 中华VN应用了。这里以Windows下的Android为例,其实在Mac下支付iOS也是一般的。

梦想本文的享用对品味景逸SUVN的新手朋友有所扶助。假如大家对下篇想讲的内容有谈得来的主见,请留言告知小编,大家必然会认真思虑。

 

1 赞 收藏 评论

图片 17

React Native(以下简称RubiconN)为观念前端开荒者张开了一扇新的大门。在那之中,使用浏览器的调整工具去Debug移动端的代码,无疑是最吸引开采职员的特点之一。

试想一下,当您在小弟大显示器按下三个按键,处总管件的代码就能够及时在浏览器的调解工具里展开断点调节和测量试验,何况每当你对代码举办修改,分界面便可以达成急忙地重载,省去昂长的编写翻译时间,那会是何其升高工效。

历史观的Web前端开荒职员本来很熟谙浏览器的调节和测量试验工具,可是对于如何将其在帕杰罗N中央银行使以便和运动端结合起来,可能会一定素不相识。那也改为了有的开辟者跨入PRADON移动支付大门的首先道小诀窍。

正文是小编一边参考官方文书档案,一边研究路虎极光N调节和测验进度的记录。希望可以帮助新手开辟者走出一小步,更加快地迈过那道门槛。

在上马此前,你必要搭建好地点开采条件,并有一部Android 5.0版本以上的手提式有线电话机可供连接至计算机。

第一,使用官方工具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的映照进程达到百分之百时,手提式有线电话机上就足以看出暗许的使用分界面了。

图片 21

图4. 私下认可使用分界面

再正是,我们也得以脱离应用,在手提式有线话机的桌面上找到这么些设置好的选取。这里,它的名字就是DebugTest,Logo是一个暗许的安卓样子。

咱俩进来那么些利用,这时借使摇一摇手提式有线电电话机,会弹出调节和测量试验相关的设置:

图片 22

图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里加上三个按键。

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

查阅文书档案发现,在奥迪Q5N里,Button组件有众多性情,当中onPress和title这两性格子是required的,也正是必供给有。

图片 25

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

本文由威尼斯手机娱乐官网发布于计算机知识,转载请注明出处:Native应用的一小步,Native基础入门之调试React

上一篇:初步使用Flexbox布局 下一篇:HTML5的新特性,知识普及
猜你喜欢
热门排行
精彩图文