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,
    },
});

//注册应用入口
AppRegistry.registerComponent('zzc', () => zzc);
效果图如下：