react-native 组件封装示例

/**
* Sample React Native App
* https://github.com/facebook/react-native */

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

var MyCell = React.createClass({
render(){
return(
<View style={styles.CellStyle}>
<Image source={this.props.ImageURL} style={styles.Image}/>
<Text style = {styles.Text}>{this.props.Title}</Text>
</View>
);
}
});

var zzc = React.createClass({

getInitialState(){
var data = [
{ImageURL:require("./testImages/1.jpg"), Title:"酒店"},
{ImageURL:require("./testImages/2.jpg"), Title:"美食"},
{ImageURL:require("./testImages/3.jpg"), Title:"美食"},
{ImageURL:require("./testImages/1.jpg"), Title:"美食"},
];
return {
MyCells:data
}
},

render() {
return (
<View style = {{marginLeft:5,margin:20,marginRight:5}}>
<View style={{flexDirection:'row',justifyContent:'center'}}>
{this.state.MyCells.map(function(myCell){
return<MyCell ImageURL={myCell.ImageURL} Title={myCell.Title}/>
})}
</View>
<View style={{flexDirection:'row',justifyContent:'center',margin:10}}>
{this.state.MyCells.map(function(myCell){
return<MyCell ImageURL={myCell.ImageURL} Title={myCell.Title}/>
})}
</View>
</View>
);
}
});

/*布局样式*/
var styles = StyleSheet.create({
Image:{
alignSelf:'center',
width:45,
height:45,
borderRadius:8,
},
Text:{
marginTop:5,
textAlign:'center',
fontSize:11,
color:'#555555',
},
CellStyle:{
width:70,
},
});

//注册应用入口