当我第一次尝试ReactNative的时候,我觉得这只是网页开发者涉足原生移动应用领域的歪门邪道。

我认为一个js开发者可以使用javascript来构建iPhone应用确实是一件很酷的事情,但是我很快放弃了自己去使用它的念头。毕竟我因为爱好而从事ios原生开发多年,并且目前为止已经很熟悉这一套开发专业工具。

我已经创造了一些我引以为傲的iOS应用——一些使用Object-C和Xcode构建的应用,通常人们都是这么做的。这两样工具是苹果公司提供的、用来开发iOS应用的,所以,我和其他的苹果开发者都在用。并且当两年前苹果公司发布Swift时,我也毫不犹豫地去尝试它。

Swift依旧被使用在Xcode中,并且依旧是苹果公司推荐的开发方式,所以我很快地深入,并且毫不费力地学会了这门语言。我满足于我的苹果生态系统圈。React Native看上去只是一个小小的乐子,在我的脑海中,一切原生应用必须被 原生 地开发。对正要开始掌握 原生 开发方式的我来说,学习javascript(我并没有这方面的经验)和一种几乎全新的构建app的方式简直是荒废时间。

时间快进到几个月过后,我可以打保票说,我再也不会使用Objective-C或者Swift来开发iOS应用了。

我们接手了一个新的移动应用开发项目,我大概的看了一下设计和需求。正当我要点开Xcode那漂亮的蓝色图标新建一个新的工程时,我们的交互设计师,Adam走过来说,“我们用React Native来做这个东西吧。”

他解释说,这个项目合同的一部分明确提及了要给这个应用做一个安卓版本。尽管React Native并不支持安卓,我们知道Facebook正积极地在这方面研究。理论上来说,如果我们用RN构建了这个应用的iOS版本,很多部分能够直接工作在以后的安卓版本上。

好吧,我并不乐意。我觉得我已经站在了iOS开发能力的顶峰,现在却要我把这一切全部丢弃。在不可避免的学习曲线面前,我怀疑我是不是能够及时地发布一个高质量的产品。但除此之外,我更加质疑RN是否有能力成产一个高质量的产品。现在看来,我甚至没有觉得这样的质疑是不公平的。当时RN作为一个Beta版本刚被公布不久,文档欠缺,开源库和组建的数量稀少,演示代码或者Stack Overflow上的参考几乎没有。

我连看都不想看它一眼。但是我这种闭塞的态度只会带来更多的不良后果。我的第一道坎是学习Flexbox,RN制作UI布局的方式。从最基础的界面构建器开始,纯粹使用代码来布局UI几乎击溃了我的自信。我挣扎着去构建最基础的视觉效果。

但不仅仅是UI——任何事情都变的不一样。这对于我是最大的挑战。

”每当我止步不前或者不理解的时候,我就告诉自己“如果用Objective-C我能够在五秒钟之内解决它”。每当我发现了RN中的一个BUG(并且bug的数量非常大),我就会想,“oc中根本不会有这种bug,我为啥一定要和RN斗智斗勇呢?”

整整两个星期,我都在工作中痛苦挣扎。我对自己的感觉从一个杰出的iOS开发者变成了一个从未写过一行代码的人。这很受挫折,直到我花费了整整一个礼拜理清了思路。我后退一步,认识到Adam对RN做了许多研究。作为我的交互知道,我不得不信任他,相信他没有把我领入一条错误的道路。我发誓我要在周一投入工作,埋头苦干,假装Objective-C和Swift从来没有存在过,并解决这个项目。

学会去喜欢React

几周之前,我们向App Store提供了第一个React Native应用。对于应用的最终表现结果我真的非常自豪,并且我迫不及待的要开始构建下一个项目了。在仅仅一个月多一点的时间里,我完全踏上了RN的贼船,是什么改变了我的想法呢?

React 范例

在React中,所有UI的组件都被放置在render()方法中,并且被state状态控制。你的render()方法定义了UI在各种状态是如何展现的。当调用setState()的时候,React会找到需要改变的部分并替你修改。想象一个简单的视图,拥有一个“Hello World”标签和按钮。每点击一下按钮,标签会在“Hello World”和“Goodbye World”之间切换。在Objective-C中,我在按钮的句柄中需要一些难堪的if声明,就像下面一样。

  1. if([label.text isEqual:@”HelloWorld”]){
  2. label.text =@”GoodbyeWorld”;
  3. }else{
  4. label.text =@”HelloWorld”;
  5. }

这样很有用,但是这种UI代码和我第一次创建这个标签的地方(可能在代码中,也可能在界面构建器里)完全脱节。在React中,我们会在state状态中定义一个buttonClicked的bool变量,在render()函数中,标签看起来会是这样的:

  1. <Text>
  2. {this.state.buttonClicked ? ‘Hello World’ : ‘Goodbye World’}</Text>

并且我们的按钮句柄也会非常简单

  1. this.setState({buttonClicked:!this.state.buttonClicked});

所有和可视化相关的代码都在同一地方,并且由状态控制一切。这使得理解和修复这段代码变的非常容易。

Flexbox

这就是我一开始非常痛恨的UI布局工具,现在变成了RN中我最喜欢的事物之一。我承认一开始非常难以掌握,但一旦你开始使用,它把 为多种不同尺寸屏幕构建UI这件事 变的机器快速和简单。我曾经对Xcode中的可视化界面编辑器十分热衷,相比于Flexbox,它的自动布局还是国语复杂。Flexbox使用的CSS式样式使得样式重用变的和复制粘贴一样简单。其中最棒的事莫过于允许你在一瞬间将样式值改变到完美。

Live/Hot Reload

没错,想看看按钮右移5像素的样子就和command+s一样简单。React Native能够被设置为在iPhone模拟器中自动重绘当前画面而不重建Xcode工程。这非常厉害因为你不仅可以通过避免重新编译儿节省时间,你还能够调整一个深度嵌套在应用中的界面,调整UI而不用回到最初的界面。

Android

现在依旧没有发布,但就快了——这一定会非常神奇。在最初我对于ReactNative犹豫不决是因为我已经习惯于做原生的iOS开发。对此我从没有过任何的抱怨。但是我也做过原生的安卓开发,这并不让人开心。React Native在安卓上会变的很瘦欢迎,同时我也在期待它的发布。这会改变移动应用开发的现状,通过使用相同的代码来部署两个平台的应用。

回顾

想念 Xcode

我还是会想念Xcode,或者说是一个IDE编辑器。我已经有了一个很好的RN开发设置,但这并不容易,Sublime Text和一大堆的插件让我有了语法高亮。sublime能够完成同一个文件中基于变量的自动补全,但始终少了一些Xcode自动补全的稳健性。我还是不得不一直查询开发者文档做参考。

小缺点,比如键入React.PropTypes.f  IDE并不会告诉我我到底在找func还是function,这很让人困惑。我也怀念Xcode的版本控制——允许我一一比较我上一次git提交的版本和现在的版本,甚至还允许我基于行撤销一些特别的改动。我意识到第三方程序能够帮助我完成这些,但是对IDE来说最棒的事情就是将这些囊括到一个包中。(译者使用VSCode可以解决这些问题)

为了运行RN项目,我需要终端运行npm,Chrome用来debug,sublime来编辑代码,最终还需要Xcode来运行这个项目并打开模拟器。在大项目中,这些都是细小的抱怨,但是当我面对RN的时候这依旧是缺点。对于Nuclide(Facebook的新IDE)我抱有很高的期望,希望它能结束所有的这些缺点。

桥接

Facebook还没有也不会去提供所有iOS转向React Native的API,所以对于那些缺失的片段他们提供了桥接js的方法。当我第一次深入RN的时候,这方面的文档非常的糟糕。每当我意识到我需要连接某些事物的时候,我差点就对RN放弃了,因为这些事情早就能够在Objective-C中正常运作。但是当她们更加详细地解释了桥接过程,提供优秀的实例之后,这就无所惧怕了。它仍然是一个麻烦,但是我能够预见到开源社区和nom上会有所有的桥接方案。事实上,大多数的iOSAPI已经存在了。

漏洞,文档,开源社区

大概所有我最初关于RN的抱怨现在都已经消失殆尽,如果我从今天开始学习它的话。漏洞每天都在被修复,新版本每一周都在迭代。文档还需要加把劲,但比以前好多了。Facebook和开源社区对于研发这个框架变的十分严谨。人们开始聚集在Github和Stack Overflow上探讨它。如果你是一个正在考虑尝试RN的iOS开发者,你要知道你不是一个人在战斗。RN非常棒,你应该带着开放的态度拥抱他。不要像我一样吧自己局限在温室里。

走出温室,世界才刚开始。

[转] 一个资深iOS开发者对于React Native的看法的更多相关文章

  1. 一个资深iOS开发者对于React Native的看法

    一个资深iOS开发者对于React Native的看法 当我第一次尝试ReactNative的时候,我觉得这只是网页开发者涉足原生移动应用领域的歪门邪道.   我认为一个js开发者可以使用javasc ...

  2. iOS 写给iOS开发者的React Native学习路线(转)

    我是一名iOS开发者,断断续续一年前开始接触React Native,最近由于工作需要,专职学习React Native也有一个多月了.网络上知识资源非常的多,但能让人豁然开朗.迅速学习的还是少数,我 ...

  3. 写给iOS开发者的React Native学习路线(转)

    我是一名iOS开发者,断断续续一年前开始接触React Native,最近由于工作需要,专职学习React Native也有一个多月了.网络上知识资源非常的多,但能让人豁然开朗.迅速学习的还是少数,我 ...

  4. 《React Native 精解与实战》书籍连载「iOS 平台与 React Native 混合开发」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  5. 写给移动开发者的 React Native 指南

    本文原创版权归 简书 wingjay 所有,如有转载,请于文章篇头位置显示标注原创作者及出处,以示尊重! 作者:wingjay 出处:http://www.jianshu.com/p/b8894425 ...

  6. 现有iOS项目集成React Native过程记录

    在<Mac系统下React Native环境搭建>配置了RN的开发环境,然后,本文记录在现有iOS项目集成React Native的过程,官方推荐使用Cocoapods,项目一开始也是使用 ...

  7. 给所有开发者的React Native详细入门指南

    建议先下载好资料后,再阅读本文.demo代码和资料下载 目录 一.前言 二.回答一些问题 1.为什么写此教程 2.本文适合哪些人看 3.如何使用本教程 4.需要先学习JavaScript.HTML.C ...

  8. 谈谈:这次疫情对一个普通iOS开发者的影响!

    “2019年已经很难了,2020年开局0-5那就更难了啊!”大家应该都很清楚,这次疫情对于国家的整体经济体系影响非常大,但是要说有多大,我也不了解,毕竟我只是个程序员!但是对iOS开发者影响有多大,我 ...

  9. iOS原生 和 react native视图混编

    在iOS原生功能中加入RN,请看之前 写的 RN与iOS交互系列文章.本篇只讲下视图混编. 关键点只有二: 1.通过 RCTRootView 加载RN视图. 2.RN中,只需要AppRegistry. ...

随机推荐

  1. linux源码“.config”文件分析

    一..config文件概述 .config文件是linux内核配置文件,当执行#make uImage编译生成内核时,顶层的Makefile会读取.config文件的内容,根据这个配置文件来编译所定制 ...

  2. Windows常见蓝屏故障分析

    转自Windows常见蓝屏故障分析 症状描述: 当您在运行Microsoft Windows 2000/XP/Server 2003.Microsoft Windows Vista/Server 20 ...

  3. 【UVA10603】Fill (构图+最短路)

    题目: Sample Input22 3 4 296 97 199 62Sample Output2 29859 62 题意: 有三个杯子它们的容量分别是a,b,c, 并且初始状态下第一个和第二个是空 ...

  4. h.264宏块与子宏块类型

    宏块类型mb_type 宏块类型表示的是宏块不同的分割和编码方式,在h.264的语法结构中,宏块类型在宏块层(macroblock_layer)中用mb_type表示(请参考h.264语法结构分析中的 ...

  5. KeilC51使用详解 (二)

    深入理解并应用C51对标准ANSIC的扩展是学习C51的关键之一.因为大多数扩展功能都是直接针对8051系列CPU硬件的.大致有以下8类: 8051存储类型及存储区域 存储模式 存储器类型声明 变量类 ...

  6. 全表扫描出现db file sequential read

    SESSION 1执行 SQL> update test1 set id=1000; SESSION 2 : select * from test1 如果表上面有大量的行迁链接,会是单块读等待事 ...

  7. Autofac 之 基于 Castle DynamicProxy2 的 Interceptor 功能

    Autofac 结合 Castle DynamicProxy2 功能        Autofac 不仅作为轻量级高效的 IoC 容器,而且还能很好的与 Castle.DynamicProxy2 结合 ...

  8. bzoj1236

    其实这道题目不难,主要要求我们有一个清晰地思路首先可以按位数讨论,这里我把1~9单独讨论了因为除了1位数,每个位数开头的数的开头数字1前面都是-号然后考虑位数的奇偶性当位数为奇数的时候比较简单举个例子 ...

  9. ServiceStack.Redis常用操作 - 事务、并发锁

    一.事务 使用IRedisClient执行事务示例: using (IRedisClient RClient = prcm.GetClient()) { RClient.Add("key&q ...

  10. @repository注解

    Spring的注解形式:@Repository.@Service.@Controller,它们分别对应存储层Bean,业务层Bean,和展示层Bean. @Repository.@Service.@C ...