ReactNative→Image布局

运行结果图片

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

// 获取json数据
var bags = require('./bags.json');

// 屏幕宽度
var Dimensions = require('Dimensions');
var {width} = Dimensions.get('window');

// 定义一些变量
var cosl = 3;
var itemW = 100;
var vmargin = (width - cosl*itemW) / (cosl+1);

export default class helloworld extends Component {

  render() {

    return (
      <View  style={styles.container}>

        {this.renderBags()}

      </View>
    );
  }


  renderBags(){

    var result = [];
    
    for (var i = 0; i < bags.data.length; i++) {

      var bag = bags.data[i];


      result.push(

          <View key={i} style={styles.item}>

            <Image source={require('./img/bag.png')} style={styles.imagesStyle}/>

            <Text style={{backgroundColor: "red"}}>

              {bag.name}

            </Text>

          </View>
      );

    }
    return result;

  }
}

const styles = StyleSheet.create({
  container: {
    // flex: 1,
    // justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    // 改变主轴方向
    flexDirection: 'row',
    // 换行显示
    flexWrap:'wrap',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  item: {
    // 侧轴居中
    alignItems:'center',
    marginTop : vmargin,
    backgroundColor: 'purple',
    marginLeft: vmargin,
    width:itemW,
    // height:itemW,
  },
  imagesStyle:{
    width : 80,
    height : 80,
    backgroundColor: 'green',
    marginTop:10,
  }
});

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