Question

如何创建一个android的react-native组件

Answer 1

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

首先，在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 (
<View>

</View>
);
},
});

var styles = StyleSheet.create({

});

module.exports = Item;12345678910111213141516171819202122232425262728293031321234567891011121314151617181920212223242526272829303132

注意最后的一句module.exports = Item;，将组件导出。
我们的组件最外围应该是一个View，View里面嵌套了一个Image和Text，并且View，Image，Text都有对应的样式，图片地址还要可以设置，文本内容可设置，而View的背景色，高度，宽度等样式应该由外部传入，并且与组件内部的样式联合作用，这一点可以使用样式数组实现，即style={[style1,style2,style3]}，最终，render函数中返回的信息如下。
<View style={[styles.item,outStyle]}>
<Image style={styles.image} source={{uri:img}}/>
<Text style={styles.text}>{text}</Text>
</View>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 (
<View style={[styles.item,outStyle]}>
<Image style={styles.image} source={{uri:img}}/>
<Text style={styles.text}>{text}</Text>
</View>
);
},
});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 (
<View style={styles.container}>
<Item style={styles.item1} color='#aaa' width='100' height='100' text='Icon' img='https://raw.githubusercontent.com/lizhangqu/androidicons/master/assets/blue_dark/xhdpi/ic_action_achievement.png'></Item>
<Item style={styles.item2} color='#aaa' width='100' height='100' text='Icon' img='https://raw.githubusercontent.com/lizhangqu/androidicons/master/assets/blue_dark/xhdpi/ic_action_bike.png'></Item>
</View>
);
},
});

var styles = StyleSheet.create({
container:{
flexDirection:'row',
justifyContent:'center',
alignItems:'center',
backgroundColor:'#ff0000'
},
item1:{
marginLeft:100,
},
item2:{
marginLeft:100,
}
});1234567891011121314151617181920212223242512345678910111213141516171819202122232425

可以看到我们在render函数中使用了Item标签，并在该标签中设置了自定义的属性，最终这些属性会被设置到我们的组件上去。