如何创建第一个React Native android应用

Facebook 在 React.js Conf 2015 大会上推出了基于 JavaScript 的开源框架 React Native，结合了 Web 应用和 Native 应用的优势，可以使用 JavaScript 来开发 iOS 和 Android 原生应用。

可以参考这位博客写的工程：
假设我们现在有这么一个需求，就是自定义一个组件，该组件由一个小图标和图标的文字说明组成，并且带有背景色，背景色可设置，宽度高度可设置。如下图所示正是两个这样的组件所组成。

首先，在index.Android.js目录下新建一个js文件，命名为item.js，在里面输入模板代码
/**
* Sample React Native App
* https://github.com/facebook/react-native
*/
'use strict';

var React = require('react-native');

var {
StyleSheet,
Text,
View,
Image,
} = React;

var Item = React.createClass({
render: function() {

return (



);
},
});

var styles = StyleSheet.create({

});

module.exports = Item;12345678910111213141516171819202122232425262728293031321234567891011121314151617181920212223242526272829303132

注意最后的一句module.exports = Item;，将组件导出。
我们的组件最外围应该是一个View，View里面嵌套了一个Image和Text，并且View，Image，Text都有对应的样式，图片地址还要可以设置，文本内容可设置，而View的背景色，高度，宽度等样式应该由外部传入，并且与组件内部的样式联合作用，这一点可以使用样式数组实现，即style={[style1,style2,style3]}，最终，render函数中返回的信息如下。


{text}
12341234

现在我们拿到外部设置的属性值
var outStyle={
width:parseInt(this.props.width),
height:parseInt(this.props.height),
backgroundColor:this.props.color,
}
var img=this.props.img;
var text=this.props.text;12345671234567

所以最终的代码是这样的
var Item = React.createClass({
render: function() {
var outStyle={
width:parseInt(this.props.width),
height:parseInt(this.props.height),
backgroundColor:this.props.color,
}
var img=this.props.img;
var text=this.props.text;
return (


{text}

);
},
});12345678910111213141516171234567891011121314151617

在内部我们还要对其进行样式化

var styles = StyleSheet.create({
item:{
justifyContent:'center',
alignItems:'center',
borderRadius:10,
marginLeft:5,
marginRight:5,
marginTop:5,
marginBottom:5,
},
image:{
width:48,
height:48,
},
text:{
color:'#ffffff',
alignItems:'center'
}
});12345678910111213141516171819201234567891011121314151617181920

当然，这个View还可以提取很多属性为自定义的属性，本例子只是为了演示，所以提取了几个个别的属性
如何使用？
也很简单，要使用的文件中引入该组件，使用定义的标签，并设置对应的属性即可。
引入组件
var Item = require('./item');11

使用组件
var AwesomeProject = React.createClass({
render: function() {
return (