为什么用react native开发app Mall会成为未来的主流
纵观目前主流开源的跨平台之路,有两条:一条是react-native;基于facebook开放的reactJs另一个是阿里巴巴的开源,可以说是基于VueJs的Vue原生。不不不,口误,是WEEX;然后我们来分析一下在开发应用的时候如何选择语言。以下小系列分享了react原生开发应用商城的实际应用经验,供大家参考:
一位资深iOS开发者对React Native的看法
当我第一次尝试ReactNative时,我认为这只是网络开发人员参与本地移动应用程序的一种不正当的方式。
我觉得对于一个js开发人员来说,使用javascript来构建iPhone应用程序真的很酷,但是我很快就放弃了自己使用它的想法。毕竟我因为爱好从事ios原生开发多年,到目前为止对这套专业开发工具还是比较熟悉的。
我已经创建了一些我引以为豪的iOS应用程序,——,以及一些使用Object-C和Xcode构建的应用程序,人们通常会这样做。这两个工具是苹果公司提供的开发iOS应用的工具,所以我和苹果的其他开发者都在使用。两年前,当苹果公司发布Swift时,我毫不犹豫地尝试了一下。
Xcode中还在使用Swift,而且还是苹果公司推荐的开发方式,所以学这门语言很快,也很轻松。我对我的苹果生态系统很满意。反应原生似乎只是一个小乐趣。在我看来,所有的本地应用程序都必须是本地开发的。对于即将掌握原生开发方法的我来说,学习javascript(我没有这方面的经验)和一种几乎全新的app构建方式简直就是在浪费时间。
快进到几个月后,我可以保证再也不会用Objective-C或者Swift开发iOS应用了。
我们接手了一个新的移动应用开发项目,我大致看了一下设计和需求。正当我准备打开Xcode漂亮的蓝色图标来构建一个新项目时,我们的交互设计师Adam走过来说:“让我们用React Native来做这件事吧。”
他解释说,项目合同的一部分明确提到制作应用程序的安卓版本。虽然React Native不支持安卓,但我们知道脸书正在积极研究这个领域。理论上,如果我们用RN构建这个应用程序的iOS版本,许多部分可以直接在未来的安卓版本上工作。
嗯,我不喜欢。我想我已经站在了iOS开发能力的巅峰,但是现在我想把它全部扔掉。面对不可避免的学习曲线,我怀疑自己能否及时发布高质量的产品。但除此之外,我甚至怀疑RN是否有能力生产出高质量的产品。现在,我甚至不认为这样的质疑是不公平的。当时RN刚刚作为Beta版本发布,文档很少,开源库和构造也很少,关于演示代码或者Stack Overflow的参考文献也很少。
我都不想看。但我封闭的态度只会带来更多的不良后果。我的第一个障碍是学习Flexbox和rn如何进行UI布局。从最基本的界面构建器开始,用代码布局UI几乎打败了我的信心。我努力构建最基本的视觉效果。
但不仅仅是UI——。一切都不一样了。这是我最大的挑战。
每当我停下来或不明白的时候,我就告诉自己,“如果我用Objective-C,我可以在五秒钟内解决它。”。每当我在RN中发现一个bug(而且BUG的数量非常大),我就会想:“oc根本就没有这样的BUG。为什么我一定要和RN打?”
整整两周,我都在努力工作。我对自己的感觉已经从一个优秀的iOS开发者变成了一个从来没有写过一行代码的人。这是一个挫折,直到我花了整整一个星期才清醒过来。我退了一步,意识到亚当对RN做了很多研究。作为我的互动知识,我要相信他,相信他没有把我引向错误的道路。我发誓周一会努力工作,假装Objective-C和Swift从来不存在,解决这个项目。
学会喜欢反应
几周前,我们向应用商店提供了第一个React Native应用程序。我真的为应用程序的最终性能感到骄傲,我迫不及待地开始构建下一个项目。短短一个多月,我彻底踏上了RN的假船。是什么改变了我的想法?
反应示例
在React中,所有UI组件都放在render()方法中,并由状态状态控制。您的render()方法定义了用户界面在各种状态下的呈现方式。调用setState()时,React会找到需要更改的部分,并为您修改。想象一个带有“你好世界”标签和按钮的简单视图。每次点击按钮,标签都会在“你好世界”和“再见世界”之间切换。在objective-c中,我需要一些尴尬的if声明在按钮的句柄中,就像下面这样。
if([label . text isequal : @ " hello world "]){ 0
label . text=@“GoodbyeWorld”;
}else{
label.text=@ " HelloWorld
}
这很有用,但是这个UI代码与我第一次创建这个标签的地方完全脱节(无论是在代码中还是在界面构建器中)。在React中,我们将在state中定义buttonClicked的bool变量,在render()函数中,标签将如下所示:
文本
{this.state.buttonClicked?你好世界' : '再见世界' }/文字
我们的按钮手柄将非常简单
this . setstate({ buttonclicked :this . state . button clicked });
所有与可视化相关的代码都在同一个地方,一切都由状态控制。这使得理解和修复这些代码变得非常容易。
弹性盒模型
这是我一开始非常讨厌的UI布局工具,现在已经成为RN中我最喜欢的东西之一。我承认一开始很难掌握,但是一旦你开始使用它,就可以快速简单地为许多不同大小的屏幕构建UI。我曾经热衷于Xcode中的可视化界面编辑器。相比Flexbox,它的自动布局在普通话中还是比较复杂的。Flexbox使用的CSS样式使得样式重用像复制和粘贴一样简单。最好的一点就是让你瞬间把风格值改变到极致。
实时/热重装
没错,看到按钮向右移动5个像素就像命令s一样简单。React Native可以设置为在iPhone模拟器中自动重绘当前图片,无需重建Xcode项目。这是非常强大的,因为您不仅可以避免重新编译儿节省时间,还可以调整深深嵌入应用程序的界面,并调整用户界面,而无需返回到原始界面。
机器人
还没发布,不过很快就——了,会很惊艳的。起初,我对ReactNative犹豫不决,因为我习惯于做原生的iOS开发。我从来没有抱怨过这个。但是我也做过原生安卓开发,不开心。React Native会变得非常瘦,在安卓上很受欢迎,我也很期待它的发布。这将改变移动应用开发的现状,使用相同的代码部署两个平台的应用。
回顾
Xcode小姐
我仍然会想念Xcode,或者IDE编辑器。我已经有了一个很好的RN开发的设定,但是并不容易。崇高的文本和许多插件给了我语法亮点。Sublime可以在同一个文件中完成基于变量的自动补全,但它总是缺乏一些Xcode自动补全的健壮性。我还得查看开发者文档以供参考。
小缺点,如打字反应。PropTypes.f IDE,不会告诉我是找func还是function,这很让人迷惑。我也很怀念Xcode的版本控制——,它可以让我把git提交的最后一个版本和当前版本一一对比,甚至可以让我基于行撤销一些特殊的修改。我意识到第三方程序可以帮助我完成这些事情,但是对IDE来说最好的事情是将它们包含在一个包中。(翻译人员可以通过使用VSCode来解决这些问题)
运行RN项目,我需要终端运行npm,Chrome调试,崇高编辑代码,最后Xcode运行项目,打开模拟器。在大项目中,这些都是小抱怨,但当我面对RN时,它们仍然是缺点。我对核素(脸书的新IDE)有很高的期望,希望它能结束所有这些缺点。
桥梁
脸书没有也不会提供iOS转向React Native的所有API,所以他们提供了一种方法来为那些丢失的片段桥接js。当我第一次深入RN时,这个领域的文档非常糟糕。每当我意识到我需要连接一些东西的时候,我几乎放弃了RN,因为这些东西可以在Objective-C中长时间正常工作。但是当他们更详细地解释桥接过程并提供优秀的例子时,他们没有什么好害怕的。这仍然是一个问题,但我可以预见,开源社区和nom之间将会有所有的桥接方案。事实上,大多数iOSAPI已经存在。
漏洞、文档、开源社区
如果我今天开始学,可能我最初对RN的抱怨现在都消失了。漏洞每天都在修复,新版本每周都在迭代。这份文件需要更加努力,但比以前好得多。脸书和开源社区对开发这个框架变得非常严格。人们开始聚集在Github和Stack Overflow上讨论它。如果你是一个考虑尝试RN的iOS开发者,你应该知道你不是一个人在战斗。RN很棒,你应该以开放的态度去拥抱他。不要像我一样,把自己关在温室里。
走出温室,世界才刚刚开始。
总结:如果你现在想开发一个商城应用,那么我可以推荐react-native给你,非常负责任。非常好用,文档齐全,你要填的坑基本都是给你准备的;如果你只想干掉混血儿,weex绝对是最好的选择。首先,weex足够简单,web开发人员可以先胜任;其次,不需要安装复杂的环境,运行环境简单,调试工具也不错,容易降级,特别适合开发单页;
目前,瑞尚也是国内首家将react-native技术应用于app开发的商城软件开发公司。