原文地址:http://www.cocoachina.com/ios/20150327/11439.html
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,可以让开发者的应用程序拥有和原生平台一致的外观和体验,并保持较高的品质。这些组件可以轻松并入开发者的应用程序中。
1
2
3
4
5
6
7
8
9
10
11
12
13
|
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>
);
},
});
|
异步执行
JavaScript应用代码和原生平台之间所有的操作都是异步执行,原生模块也可以使用额外线程,这意味着把开发者可以解码主线程图像,并将其在后台保存至磁盘,而文本和布局的估量计算也不会阻塞UI等。因此React Native app的流畅度和响应性都非常好。通信也是完全可序列化的,当运行完整的应用程序时,这允许开发者使用Chrome Developer Tools来调试JavaScript,或者在模拟器中,或者在真机上。
触摸处理
iOS有一个非常强大的系统--Responder Chain,可以用来响应复杂视图层级中的事件,但并没有类似功能的web工具。React Native可实现类似的响应系统并提供高水平的组件,比如TouchableHighlight,无需额外配置即可与滚动视图和其他元素适度整合。
1
2
3
4
5
6
7
8
9
10
11
12
13
|
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>
);
},
});
|
弹性框和样式(Flexbox and Styling)
布局视图应该是简单的,所以我们将web平台上的弹性框模块引入了React Native。弹性框可用来搭建最常用的UI布局,比如代用边缘和填充的堆叠和嵌入。React Native还支持常见的web系统,比如fontWeight和StyleSheet。
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
|
var React = require(
'react-native'
);
var { Image, StyleSheet, Text, View } = React;
var ReactNative = React.createClass({
render: function() {
return
(
<view style={styles.row}>
<img source=
"{{uri: 'http://facebook.github.io/react/img/logo_og.png'}}"
style=
"{styles.image}"
=
""
>
<view style={styles.text}>
<text style={styles.title}>
React Native
<text style={styles.subtitle}>
Build high quality mobile apps
using
React
);
},
});
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 },
});</text style={styles.subtitle}></text style={styles.title}></view style={styles.text}></view style={styles.row}>
|
可扩展性
使用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/