React Native组件布局应用示例小结

import React, { Component } from 'react';
import {
   AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
} from 'react-native';

var heroData = require('./ImageData.json');

class RNHybrid extends Component {

  render() {  
      return(  
        <View style={styles.container}>  
            {this.renderLoadForView()}  
        </View>  
      );  
   }

   renderLoadForView(){  
    var forView = [];
    var heroArray = heroData.data
    for (var i = 0; i < heroArray.length; i++) {  
    	var hero =  heroArray[i];
        forView.push(
        <View key={i} style={styles.containViewStyle}>
        <Image source={{uri: hero.img}}  style={styles.imageStyle}/>  
        <Text key={i}>
           {hero.title}
        </Text>
        </View>
      );  
    }  
    return forView;  
  }  
}


const styles = StyleSheet.create({
   container:{
   		marginTop:100,
   		flexDirection:'row',
      flexWrap:'wrap',
      justifyContent:'space-around',
   },
   containViewStyle:{
      alignItems:'center',
      justifyContent:'center',
      width:120,
      height:120,
      borderColor:'black',
      borderWidth:1,
      marginBottom:10,
   },
   imageStyle:{
      width:60,
      height:60,
   },
});

AppRegistry.registerComponent('RNHybrid', () => RNHybrid);

{
  "data": [
    {
      "img" : "hero1",
      "title" : "木木"
    },
    {
      "img" : "hero2",
      "title" : "剑姬"
    },
    {
      "img" : "hero3",
      "title" : "船长"
    },
    {
      "img" : "hero4",
      "title" : "日女"
    },
    {
      "img" : "hero5",
      "title" : "锤石"
    },
    {
      "img" : "hero6",
      "title" : "老鼠"
    }
  ]
}