01.列表布局

代码如下：

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

//导入本地json数据
var BadgeData = require('./BadgeData.json');

//定义全局变量
var Dimension = require('Dimensions');
var {width} = Dimensions.get('window');

var columns = 3;//列数
var boxW = 100;//宽度
var vMargin=  (width - columns * boxW) / (columns + 1);
var hMargin = 25;

class AImageDemo extends Component {
  render() {
    return (
      <View style={styles.container}>
        {this.renderAllBadge()}
      </View>
    );
  }
  //返回所有的包
  renderAllBadge() {
    //定义数组装所有的子组件
    var allBadge = [];
    for(var i = 0; i < BadgeData.data.length; i++) {
      //取出单独的数据对象
      var badge = BadgeData.data[i];
      //去除数据装入数组
      allBadge.push(
        <View key={i} style={styles.outViewStyle}> 
          <Image source={{uri:badge.icon}} style={styles.imageStyle}/>
          <Text style={styles.mainTitleStyle}>
            {badge.title}
          </Text>
        </View>
      );
    }
    return allBadge;
  }
}

const styles = StyleSheet.create({
  container: {
    flex:1,
    backgroundColor: '#F5FCFF',
    //主轴的方向
    flexDirection:"row",
    //换行显示
    flexWrap:'wrap'
  },

  outViewStyle:{
    backgroundColor:'red',
    //设置侧轴的对齐方式
    alignItems:'center',
    width:boxW,
    height:boxW,
    marginLeft:vMargin,
    marginTop:hMargin
  },
  
  imageStyle:{
    width:80,
    height:80
  },
  mainTitleStyle:{
    
  }
});

export default AImageDemo;

BadgeData.json

{
    "data":[
        {
            "icon": "baobao1",
            "title": "包包1"
        },
        {
            "icon": "baobao2",
            "title": "包包2"
        },
        {
            "icon": "baobao3",
            "title": "包包3"
        },
        {
            "icon": "baobao4",
            "title": "包包4"
        },
        {
            "icon": "baobao5",
            "title": "包包5"
        },
        {
            "icon": "baobao6",
            "title": "包包6"
        },
    ]
}

输出如下：