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"),{ImageURL:require("./testImages/1.jpg"),];
        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);
效果图如下：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!