代码改变世界

facebook开源React Native,可以用JS开发原生IOS应用

2015-03-27 14:26  Mirana  阅读(414)  评论(0编辑  收藏  举报

最近facebook开源了React Native,可以基于React.js开发原生的IOS和Android应用,并且已经有上线的应用Facebook group。
javascript也可以写原生的ios应用了,离js统一世界又进了一步,激动。。

##Getting Started

###Requirements

1. OS X,目前react native只有IOS版,而且Xcode只能在mac上用。
2. Xcode
3. homebrew,可以用来安装node,watchman,flow
4. brew install node
5. brew install watchman
6. brew install flow

###Quick Start

npm install -g react-native-cli
react-native init react_ios

这就创建了一个空的工程,进入目录,打开react_ios.xcodeproj,修改index.ios.js。
command+r就可以运行了。

附index.ios.js代码,把react.js里虚拟dom的概念搬到了ios里,UI提供了类似flexbox的布局,并实现了css的子集。

/**
* Sample React Native App
* https://github.com/facebook/react-native
*/
'use strict';

var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
} = React;

var react_ios = React.createClass({
render: function() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js{'\n'}
Press Cmd+R to reload
</Text>
</View>
);
}
});

var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
},
});

AppRegistry.registerComponent('react_ios', () => react_ios);

原文:http://www.mirana.me/blog/55150b8ce1382362097499a3