移动应用跨平台框架江湖将现终结者？速来参拜来自Facebook的React Native

 

React Native使用初探

February 06 2015

Facebook让全部React Conf的参与人员均可以初尝React Native的源码---一个编写原生移动应用的方法。该方法运用了React.js的全部强大的功能来将其应用到原生应用。你能够经过使用其内嵌的基本元素来编写基于Javascript的组件，这些组件都是拥有着iOS和Android控件的支撑的。

首先，我知道Facebook如今尚未彻底将其开源是个很挫的事情啦，但他们如今正在将该项目往开源的方向推动了。他们如今正在把跟Facebook环境相关的代码给移除掉而且正在准备创建一套接受开发人员对该开源项目进行贡献和参与的流程。我认为他们在努力往开源这个方向推动是个很好的事情，说明他们真的很在乎React社区了。相信这个项目很快就能彻底开源了。

其实本人并不认为开源的步骤慢点是个根本性的错误了。若是你认为是的话我将很乐意跟你进行探讨，但请容许我把该讨论放在另一个议题里面吧。

由于若是你被该讨论打断思路的话，在这里你可能会错过咱们今天对如何经过React Native编写原生移动应用的潮流已经发生改变的讨论。这种改变最大的地方就是它使用起来更像是在编写一个网路应用。

本人已经算是开发iOS应用多年的老手了，故此我有着不少原生应用开发的经验。在跟React Native勾搭上后，我只能用如下的表情来表达个人心情:

 

相信咱们都听过各类由Javascript驱动的跨平台原生应用开发框架，好比Titanium, PhoneGap, 以及其余各类各样的容许不一样层面与原生环境进行转化的项目。全部这些框架看起来都是比较挫的：不管你如今是想把一个网络应用包装在一个WebView里面，或者是想要硬套HTML&CSS这套很难用来构建移动应用的技术。对于后者，你几乎无时无刻不在直面原生对象，这在性能方面来讲注定就是一个失败的尝试。React Native就不同，它的布局方面实际上是运行在一个独立的线程里面的，因此UI主线程就能如往常同样的尽量的空闲出来进行界面动画等的呈现处理(它同时也提供了flexbox 来简化布局，这可并非全部框架都能提供出来的)。

这里你仅仅须要浅尝就能领略到React Native所隐藏的无限潜力。它工做起来会让你感受你是在作网络开发同样的舒畅。而事实上你确是在开发着一个真实的原生应用，事实上是根本分不出来这里面的区别的。在UI层面上，这事实上是根本没有区别的，使用到的都是像正常同样眩眼滑动的原生的UIViews。

这其实都是软件工程的功劳。同时这就彻底进一步的证实了一个事实就是React.js是构建一个跨平台应用的正确方式。我可使用该方式来像编写一个网络应用同样来编写一个原生应用。咱们彻底能够从今开始把DOM做为一个实现的细节，就好像UIViews同样。

我不否定我是很喜欢网络编程的，但若是咱们一步步的埋头慢慢的认真检查每个错误，咱们就很容易把一些重大的问题跟忽略掉。网络编程的方式来编写应用从根本上说就是个很古怪的事情：HTML加上CSS所形成的混乱会对各类框架制造路障而不是让它们变得更好。也许React Native会最终是一个指引你回到正确的道路上面来的正确方式。我期盼着看到它是如何让网络编程方式变成一个更好的移动应用编程方式。咱们不要把它想象成一个和网络编程背道而驰的东西，而要把它想象成是一个从网络编程进入到另一个方向的原型。

到了这里你是否已经感受眼花缭乱无所适从了？没事，我将会经过示例告诉你React Native是如何工做的！固然你能够在这里和这里经过视频学到更多的这方面的知识了。

React Native使用的是iOS上的JavaScriptCore来运行Javascript(Android和其余平台将会在未来进行支持)。重要的一点是它将Javascript放在一个独立的线程上运行(其余框架如Titanium也是这样作的)。你使用Javascript来编写一个控件跟使用React.js其实没有太大的区别，除了你应该使用的是如View和Text而非div和a以外。你将会得到使用React生成UI组件的全部的优势(保守的说，这是很是牛X的!!!)。请谨记，JavaScript不只仅是一门语言，它仍是一个平台。存在着大量的优秀的"JS转换"工具供你使用。

React Native将你在另一个线程经过Javascript编写的UI以最小数量的数据发送给UI主线程来把它桥接转换成原生的组件。好比把一个View转换成UIView。最赞的地方是你不须要担忧你的UI主线程的更新来现实最新的改动；你只要声明你将须要UI基于某种状态进行桥接转换就好了，React使用的是一个独特的算法把最小量的必须的改动发送到该桥接来反映UI的变化(天地会珠海分舵注：若是你清楚增量存储的概念的话将会很容易理解这句话)。

编写原生UI从未如此的简单，何况这将不会有如播放动画卡顿等诸如此类的问题的出现，由于JS是在一个独立于UI主线程的线程中运行的。动画播放将会比吃了泻药还要顺畅！

 

基于React Native的一个OpenGL应用

 

个人第一个React Native应用其实并非一个传统的应用：我编写的是一个波前对象模型演示应用。我我的一直对游戏开发比较感兴趣，可是我对编写原生UI却很反感。React Native恰好给了我一个使用编写网页UI的方式来编写原生UI的方案。

我保证你将会看到大量的使用原生导航和动画之类的传统应用演示。我认为经过很是简便的把React Native置身于OpenGL控件上面来完成相应的工做是一项很酷的事情。

去把React Native集成在你的项目里面实际上是个很简单的事情，你只须要在你的控制器种建立一个RCTRootView，而后告诉它你的JS是摆在哪里，并把它添加到窗口上面就完成了。在个人尝试中，我是首先建立了一个OpenGL的控件，而后把RCTRootView做为一个子控件添加到该控件上面。该集成的过程是彻底一个无痛人liu的过程，哦，很差意思，是一个彻底毫无痛苦的过程。(天地会珠海分舵注：近来被电视和路边广告轰炸的晕了，处处都是无痛人liu之类的广告，看到无痛两个字就马上神经反射的联系到无痛人liu来了)

你能够按下Cmd+R来马上刷新你的UI来现实你修改的任何更新。这里仅仅RCTRootView会进行更新，因此我能够很容易的对ui进行修改而后刷新ui来得到最近的修改，而并不须要从新加载OpenGL层。

如下是一个控件示例，一个用来列出可用文件列表并在其中一项被点击后加载一个网格的ObjList控件。这里将会用到一个和其余任何原生应用同样的原生的用来仅仅在控件内部进行滚动显示的ListView控件，但在这里进行使用确实一个极其简单的事情。

 

var ObjList = React.createClass({
  // a few methods clipped....

  selectModel: function(file) {
    controller.loadMesh(file);
  },

  renderRow: function(file) {
    return View(
      null,
      TouchableHighlight(
        { onPress: () => this.selectModel(file),
          underlayColor: 'rgba(0, 0, 0, .6)' },
        Text({ style: { height: 30, color: 'white' }}, file)
      )
    );
  },

  render: function() {
    var source = this.getDataSource(this.props.files);

    return ListView({
      style: { flex: 1 },
      renderRow: this.renderRow,
      dataSource: source
    });
  }
});

 

在个人App控件里面我有一个handlSearch方法来相应文本输入的改变。这里我对控件的状态作一些改变，一边让应用和ObjList控件接受到最新的状态改变来将最新的文件列表给显示出来。

 

handleSearch: function(e) {
  var text = e.nativeEvent.text;
  var files = allFiles.filter(x => x.indexOf(text.toLowerCase()) !== -1);
  this.setState({ files: files });
}

 

 

请注意ObjList控件里面的controller.loadMesh()这个调用。这实际上是一个Objective-C的一个方法，这里我已经把它作了一个导出标识了，这样桥接就会找到它并使它在JS中变成可用。跟桥接进行协同工做实际上是一个很是简单的事情，且将会变得愈来愈简单。如下就是loadMesh的实现代码:

 

- (void)loadMesh:(NSString *)path {
    RCT_EXPORT();

    dispatch_async(dispatch_get_main_queue(), ^{
        teapotNode_.material.diffuse = [self randomColor];
        teapotNode_.wavefrontMeshA = [REMeshCache meshNamed:path];
        [self reset];
    });
}

 

 

RCT_EXPORT()将该方法标识成使一个导出方法(事实上在其余地方实现的对该类进行实例化的工做会有点多)。这些方法将会在一个独立的线程中被调用，可是我这里须要的使在主线程对该mesh进行加载(由于这将会把数据加载到OpenGL当中)，因此这里我网队列中排队了一块运行在主线程中的代码。

如下的视频将会给你们一个更完整的演示：https://www.youtube.com/embed/OPFf53fdUmQ

在声明的过程当中来构建咱们的UI控件并对简单的改变状态所产生的事件进行相应的能力是很是的强大的，React.js必定证实了这一点。到此为止，咱们忽然间就到了须要对原生应用进行一样处理的时候了。"一次学习，多平台编写“，犹如React开发人员所倡导的。同时请查看：Facebook来教我咱们如何编写网站。

－－－－－－－－－－－－－－完－－－－－－－－－－－－－－－－－－

转载请尊重原创/译	微信公众号	CSDN
天地会珠海分舵	服务号:TechGoGoGo	http://blog.csdn.net/zhubaitian
优秀资源推荐	地址	点评
DoctorQ博客	http://testerhome.com/doctorq/topics	安卓自动化领域才俊，技术分享先驱，

 

英文版原文：http://jlongster.com/First-Impressions-using-React-Native