react-native九宫格布局

效果图如下

34018D92-5CA9-4CEB-8526-AA9729905D46.png

附上代码 ：https://github.com/wanwang88/ReactNativeFlexBoxImageDemo

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

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

var Dimensions = require('Dimensions');
//定义全局的一些变量
var {width} = Dimensions.get('window');
var cols = 3;
var boxW = 100;
var vMargin = (width-cols*boxW)/(cols+1);
var hMargin = 25;
class AImageDemo extends Component {
  render() {
    return (
      <View style={styles.container}>
        {/*返回六个包*/}
        {this.renderAllBadge()}
      </View>
    );
  }

  //返回所有的包

  renderAllBadge(){
      //定义数组所有的子组件
    var allBadge = [];
    //遍历json数据
    for(var i=0 ;i<BadgeData.data.length;i++){
      var model = BadgeData.data[i];
      //直接装入数组
      allBadge.push(
        <View key={i} style={styles.autoViewStyle}>
          <Image style={styles.imagesStyle} source={{uri:model.icon}}/>
          <Text style={styles.textsStyle}>{model.title}</Text>
        </View>
      );
    }
    //返回
    return allBadge;
  }
}

const styles = StyleSheet.create({
  container: {
    //横向
    flexDirection:'row',
    //换行显示
    flexWrap:'wrap'

  },

  autoViewStyle:{
    backgroundColor:'gray',
    //设置侧抽对齐
    alignItems:'center',
    width:boxW,
    height:boxW,
    marginLeft:vMargin,
    marginTop:hMargin
  },

  imagesStyle:{
    width:80,
    height:80

  },
  textsStyle:{


  }
});
AppRegistry.registerComponent('AImageDemo', () => AImageDemo);