一个Image的案例

解析json并显示到界面上

/**
 *  Image 案例
 */

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

var dimensions=require('Dimensions')
var datas=require('./1.json');
var mImageWidth=70;
var mImageHeight=70;
var screenWidth=dimensions.get('window').width;
var mMargeWidht=(screenWidth-mImageWidth*3)/4  //计算左边的距离
var mMargeTop=15;

export default class ImageComment extends Component<{}> {

     constructor(props){
         super(props)
     }

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

    getImageS() {
        let viewArrays = [];
        for (var i = 0; i < datas.length; i++)
        {
            var data=datas[i];
            viewArrays.push(
                <View key={i} style={styles.innerViewStyle}>
                    <Image style={styles.innerImage} source={{uri:data.instrument}}/>
                    <Text style={styles.innerText}>
                        {data.firstName}
                    </Text>
                </View>
            )
        }
        return viewArrays;
    }
}




const styles=StyleSheet.create({
    container:{
        flexDirection:'row',
        flexWrap:'wrap',
        flex:1
    },
    innerImage:{
        width:mImageWidth,
        height:mImageHeight
    },
    innerViewStyle:{
        borderWidth:1,
        borderColor:'red',
        alignItems:'center',
        marginLeft:mMargeWidht,
        marginTop:mMargeTop,
        padding:2,
        backgroundColor:'gray'
    },
    innerText:{
        padding:2
    }
})

效果是：

360截图20171117230637878.jpg