您的位置:乐百家在线 > 乐百家官方网站 > 自定义成分教程,Native应用的一小步

自定义成分教程,Native应用的一小步

2019-10-14 01:56

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

2018/07/04 · JavaScript · React Native

原作出处: 葡萄干城控件   

React Native(以下简称EnclaveN)为古板前端开辟者张开了一扇新的大门。在这之中,使用浏览器的调剂工具去Debug移动端的代码,无疑是最吸引开拓人士的特征之一。

试想一下,当你在手提式有线话机荧屏按下四个按键,处监护人件的代码就足以马上在浏览器的调弄整理工科具里实行断点调节和测验,而且每当你对代码举办修改,分界面便足以达成火速地重载,省去昂长的编写翻译时间,那会是何等提升级工程师作功能。

理念的Web前端开拓人士本来很精通浏览器的调治将养工具,不过对于什么将其在福睿斯N中央银行使以便和移动端结合起来,或者会一定素不相识。那也成为了有些开拓者跨入TiggoN移动支付大门的率先道小秘诀。

本文是作者一边参谋官方文书档案,一边搜求LacrosseN调节和测量检验进度的笔录。希望能够扶植新手开垦者走出一小步,越来越快地迈过那道门槛。

在开端在此以前,你须要搭建好地点开拓条件,并有一部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的投射进程达到百分百时,手机上就能够看见暗中认可的施用分界面了。

图片 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. 增加开关

自定义成分教程,Native应用的一小步。以此时候,保存代码。手提式有线电话机界面确实立刻就成形了!表达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代码。

翻看文书档案开采,在福特ExplorerN里,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次输出。这是与调度网页时的差异:当调试网页时,一旦实行到断点,浏览器的页面其实就不足点击了。

到这一步,是还是不是认为使用LacrosseN开采也绝非那么难啊?

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

近来一度清楚了调度设置中Remote JS Debugging, Live Reload和 Hot Reloading。相信大家曾经足以相比较从容地Debug轻巧的 CRUISERN应用了。这里以Windows下的Android为例,其实在Mac下开辟iOS也是形似的。

企望本文的享受对品味LacrosseN的生手朋友有所扶持。假诺我们对下篇想讲的开始和结果有本人的主见,请留言告知小编,大家终将会认真思量。

 

1 赞 收藏 评论

图片 17

打赏辅助笔者翻译越来越多好小说,多谢!

任选一种支付办法

图片 18 图片 19

2 赞 8 收藏 1 评论

关于小编:陈被单

图片 20

热爱前端,招待交换 个人主页 · 作者的小说 · 19 ·   

图片 21

二、HTML import

有了自定义成分,就足以写出语义性相当好的 HTML 代码。

XHTML

<share-buttons> <social-button type="weibo"> <a href="...">微博</a> </social-button> <social-button type="weixin"> <a href="...">微信</a> </social-button> </share-buttons>

1
2
3
4
5
6
7
8
<share-buttons>
  <social-button type="weibo">
    <a href="...">微博</a>
  </social-button>
  <social-button type="weixin">
    <a href="...">微信</a>
  </social-button>
</share-buttons>

地点的代码,一眼就会观察语义。

如果将`元素的样式与脚本,封装在一个 HTML 文件share-buttons.html`之中,那些元素就足以复用了。

行使的时候,先引进share-buttons.html

<link rel="import" href="share-buttons.html">

1
<link rel="import" href="share-buttons.html">

接下来,就足以在网页中使用``了。

XHTML

<article> <h1>Title</h1> <share-buttons/> ... ... </article>

1
2
3
4
5
<article>
  <h1>Title</h1>
  <share-buttons/>
  ... ...
</article>

HTML imports 的越来越多用法能够参照教程(1,2)。最近独有Chrome 浏览器援救那些语法。

HTML5 近些日子不能够兑现的5件事

2011/12/13 · HTML5 · HTML5

阿拉伯语原稿:Five Things You Can’t Do With HTML5 (yet),编译:Web App Trend

一如既往,非常多少人都小心于HTML5可以看到落到实处怎么样(恐怕是何等将各类方法连接起来,实现多个一发雅致的消除方案)。而明日,也不在少数人想将眼光投向那一个HTML5无法兑现的专门的学业。MSDN上微软职员和工人thebeebs的一篇博文回答了这几个主题素材:

1:HTML5不能够落实DRM

借让你有一家多媒体集团,你须要调节或许限制你的录像内容——平日是在多媒体内容中加多数字版权加密才具(DRM)。不幸的是,HTML5不可能参与DRM。HTML5的主题素材是,它会将多媒体内容的格式完全暴流露来,要消除那几个难题并不困难(相关的技术和政策能够在W3C bug system上来看)。笔者个人认为,这一个难题确实有要求消除。抛开各界对DRM的对立,起码对众多商厦来讲,协助DRM照旧拾叁分有意义的——看看Lovefilm的blog ,你就理解方今相继多媒体企业面前蒙受的不方便了。

2:HTML5不可能播放直播录制

HTML5已经能够很好地管理静态的录像文件了,但它以往还不能管理直播的摄像。固然HTML5能力所能达到提供上乘的摄像查询和摄像点播服务,可是它却不能支撑顾客看见在线的足球竞技。Apple使用HTTP Live Streaming弥补了HTML5的这一缺点和失误。它经过HTTP传输H.264的文件块,不过这一本事只好在Safari上运转。(顺便提一句,有些人以为HTML5不帮衬摄像的轻巧播放,但实际HTML5是匡助这一效果的。)Streaming Media笔录的网址上能够找到极其丰硕的HTML5录制财富。

3:HTML5上的点子处理也不到家

你或然会感到:既然HTML5都能够消除录制播放难题了,那音频播放自然不言自明咯。但音频管理最大的主题素材便是如什么地点理延迟的标题。当你的应用程序或是游戏须求音频文件与显示屏上显得的操作保持同步时,那些主题素材就展现出来了。个中多少个标题就是分歧的浏览器管理音频文件的主意可能也截然不同。假如想打听越来越多相关的音讯,能够看看IE博客上的有关介绍,Grant Skinner的SoundJS JavaScript library提供了一种科学的消除方案。

4:HTML5上不可能与摄像头交互

与Flash有所差异,HTML5不扶植客商与录像头交互(也许是PC机上的Mike风),那使得基于web的集会很难落到实处。当然亦不是一丝一毫没有章程,在HTML5Labs上,你能够找到贰个Media Capture API的相干规范,它是W3C标准中关于音频管理的有的。HTML5Labs是由最初的Microsoft规范和一部分web规范(如W3C)演变而来的。所以它近日还处在发展之中,一旦音频管理难点化解了,就从头动手化解摄像难点了。你能够在HTML5Labs网址上找到非常多生死相依的质感

5:HTML5上没办法兑现摄像的全屏播放

应用插件全屏观望摄疑似不曾难题的。不过,假设是行使HTML5,那也许还不怎么困难(起码是以往)。但针对这一难点,未来曾经有局地连锁的扶植契约了。ChrisPearce在Thundering Herd博客中介绍了他是什么样运用HTML全屏API在Firefox上完结录制的全屏播放的。那些API提供了“全屏”的HTML组件。Chrome上也会有有关的解决方案。

上述就是HTML5脚下不可能完成的5件事,但是HTML5尽快将一蹴即至上述这一个标题。

赞 收藏 评论

图片 22

定义 Body

XHTML

<body style='margin : 0px; overflow: hidden;'> <!-- ... --> </body>

1
2
3
<body style='margin : 0px; overflow: hidden;'>
    <!-- ... -->
</body>

这一步,国际惯例。就像是你在具备 HTML 页面中做的均等,定义 body。

打赏支持自身写出越来越多好文章,多谢!

任选一种支付情势

图片 23 图片 24

1 赞 3 收藏 2 评论

四、参照他事他说加以考察链接

  • John Negoita, Extending HTML by Creating Custom Tags
  • StackOverflow, Are custom elements valid HTML5?
  • Eric Bidelman, Custom Elements v1: Reusable Web Components

 

1 赞 1 收藏 评论

图片 25

本文由乐百家在线发布于乐百家官方网站,转载请注明出处:自定义成分教程,Native应用的一小步

关键词: