FB开源React Native，用JS开发原生iOS应用-react native ios

Facebook今日正式开源了React Native库，目前已经可在github上下载，目前只有iOS版，不过Android版本很快也将开源。开发者可使用JavaScript和Facebook的React库开发原生的iOS和Android应用程序。同时Facebook还开源了Nuclide--一个针对React Native、web以及原生移动开发的IDE。Nuclide基于Atom构建，并且有活跃的社区作为支持。

React Native使用Javascript将app编译为原生的应用程序视图，提供了用户熟悉的iOS和Android设备上的外观和体验。React Native并不像你此前使用过的web封装包，其代码表现几乎和原生的应用程序一样。

Facebook已经使用React Native开发了其旗下主要的应用程序，比如Facebook Groups，这款应用就是使用React Native渲染了大部分视图。该公司表示React和React Native可让开发者只学习一种语言就能轻易为任何平台高效地编写代码。并且Facebook将会在React Native继续投资和投入。

Facebook宣布开源该项目，对很多开发者来说都是相当激动的一件事。此前Facebook就开源了自家多个项目，比如此前的网络测试工具Augmented Traffic Control (ATC)，动画引擎POP以及微调工具Tweaks等。

React Native特点包括：

原生的iOS组件

开发者可使用标准平台组件，比如iOS平台上的UITabBar和UINavigationController，可以让开发者的应用程序拥有和原生平台一致的外观和体验，并保持较高的品质。这些组件可以轻松并入开发者的应用程序中。

var React = require('react-native');  
var { TabBarIOS, NavigatorIOS } = React;  
var App = React.createClass({  
  render: function() {  
    return (  
      <tabbarios>  
        <tabbarios.item title="react native" selected={true}>  
          <navigatorios initialroute={{ title: 'react native' }} >  
        </navigatorios initialroute={{ title: 'react native' }} >  
      </tabbarios.item title="react native" selected={true}>  
    );  
  },  
});</tabbarios> 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

异步执行

JavaScript应用代码和原生平台之间所有的操作都是异步执行，原生模块也可以使用额外线程，这意味着把开发者可以解码主线程图像，并将其在后台保存至磁盘，而文本和布局的估量计算也不会阻塞UI等。因此React Native app的流畅度和响应性都非常好。通信也是完全可序列化的，当运行完整的应用程序时，这允许开发者使用Chrome Developer Tools来调试JavaScript，或者在模拟器中，或者在真机上。

触摸处理

iOS有一个非常强大的系统--Responder Chain，可以用来响应复杂视图层级中的事件，但并没有类似功能的web工具。React Native可实现类似的响应系统并提供高水平的组件，比如TouchableHighlight，无需额外配置即可与滚动视图和其他元素适度整合。

var React = require('react-native');  
var { ScrollView, TouchableHighlight, Text } = React;  
var TouchDemo = React.createClass({  
  render: function() {  
    return (  
      <scrollview>  
        <touchablehighlight onpress={() => console.log('pressed')}>  
          <text>Proper Touch Handling</text>  
        </touchablehighlight onpress={() =>  
      </scrollview>  
    );  
  },  
}); 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

弹性框和样式（Flexbox and Styling）

布局视图应该是简单的，所以我们将web平台上的弹性框模块引入了React Native。弹性框可用来搭建最常用的UI布局，比如代用边缘和填充的堆叠和嵌入。React Native还支持常见的web系统，比如fontWeight和StyleSheet。

var React = require('react-native');  
var { Image, StyleSheet, Text, View } = React;  
var ReactNative = React.createClass({  
  render: function() {  
    return (  
      <view style={styles.row}>  
        <img         =""           style="{styles.image}"           source="{{uri: 'http://facebook.github.io/react/img/logo_og.png'}}">  
        <view style={styles.text}>  
          <text style={styles.title}>  
            React Native  
          </text style={styles.title}>  
          <text style={styles.subtitle}>  
            Build high quality mobile apps using React  
          </text style={styles.subtitle}>  
        </view style={styles.text}>  
      </view style={styles.row}>  
    );  
  },  
});  
var styles = StyleSheet.create({  
  row: { flexDirection: 'row', margin: 40 },  
  image: { width: 40, height: 40, marginRight: 10 },  
  text: { flex: 1, justifyContent: 'center'},  
  title: { fontSize: 11, fontWeight: 'bold' },  
  subtitle: { fontSize: 10 },  
}); 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.

可扩展性

使用React Native无需编写一行原生代码即可创建出一款优秀的应用程序，并且React Native可通过自定义原生视图和模块来进行扩展--也就是说你可以重用此前的任何内容，可导入和使用你最喜欢的原生库。

关于React Native的更多详细内容，请参阅以下资源：

GitHub主页：https://github.com/facebook/react-native

文档支持页面：http://facebook.github.io/react-native/

Nuclide介绍：http://nuclide.io/

Facebook开源项目展示：https://code.facebook.com/projects/