使用React Native的第一印象

15-02-07 banq
                   

Facebook提供了一种编写原生移动应用的效果的框架,称为:React Native,你可以使用Javascript编写可媲美原生iOS或安卓组件的效果。

James Long在过去几个月研究学习了Ember, Angular, 和 React,得到了很多Web组件的思想,这些框架都是以不同方式解决类似的问题,有些是冲突,有些是可和谐相处的。

James Long主要关心数据绑定和组件化componentizing UI,在研究了上面这些技术框架后,他认为React提供了最好的解决方案。

James Long在First Impressions using React Native一文中描述了如何使用React Native在浏览器实现3D等原生应用程序才能开发的效果。

React Native还没有完全开源,Facebbook正在进行清理代码等准备工作,他们应该会更快地开源。

关于跨平台原生应用目前主要由JavaScript. Titanium, PhoneGap驱动,这些项目都有一个短处,要么你将Web应用包装在一个Web浏览器中,要么他们试图模仿HTML/CSS,然后,你换可以直接和原生对象交互,但是这容易造成很大性能问题,React Natice实际在单独线程实现布局layout,这样主线程是自由的,能够聚焦一些平滑的动画等。

React Native使用JavaScriptCore 在iOS中运行Javascript,最重要部分是它以单独线程运行Javascript(Titanium也是这么做),你能使用Javascript编写组件,就像你在使用React.js一样,除了不使用div和a,而是使用View和Text,你能得到React所有构建UI的组合优点。

React Native会获取你的UI然后发送少量的数据到主线程,使用原生组件来渲染界面,View是一个UIView,最精彩的是你不必关心更新UI,你只要基于一些状态声明渲染即可,React会使用不同算法计算你的改变和实际界面之间的差别,然后只发送这种差别数据到实际界面进行渲染。(注:这是React.js最核心的一部分,体现效果是速度性能快)

编写原生UI从来都不是很容易,而使用JS编写动画不会有性能问题,因为JS运行在单独线程。

该文展示了一个使用React Native编写的OpenGL 3D应用:

实现代码也很简单,试图渲染部分:

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

  selectModel: function(file) {
//调用Objective-C方法
    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
    });
  }
});
<p>

                   

8
lostalien
2015-02-09 15:36

很期待这个技术