code show as below;
/**
* 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';
//Import json data
var badgeData = require('./BadgeData.json');
var Dimensions=require('Dimensions');
var {width}=Dimensions.get('window');
//define some global variables
var cols = 3;
var boxW = 100;
var vMargin=(width-cols*100)/(cols+1); // The number of margins sets the left and right margins
var hMargin=25; //upper and lower margins
export default class ImageComponent extends Component {
render() {
return (
<View style={styles.container}>
{/* Return the json data of 6 pictures this represents the current component*/}
{this.renderAllBadge()}
</View>
);
}
//return all packages
renderAllBadge () {
//Define an array to hold all the image arrays
var allBadge = [];
var dataArr = badgeData.data;
//for loop
for (var i = 0; i < dataArr.length; i++) {
// get a single json object
var badge = dataArr [i];
//Add to the array box
allBadge.push(
<View style={styles.outViewStyle}>
<Image key={i} source={{uri:badge.icon}} style={styles.imageStyle}>
</Image>
<Text style={styles.textContentStyle}>
{badge.title}
</Text>
</View>
);
}
return allBadge;
}
}
//style style settings
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
// Determine the direction of the spindle
flexDirection:'row',
// display line break
flexWrap:'wrap',
},
//Set the external style
outViewStyle:{
backgroundColor:'white',
width:boxW,
height:boxW,
marginLeft:vMargin, //Set the left margin
marginTop:hMargin, //Set the top margin
},
//set image style
imageStyle:{
width:80,
height:80,
},
textContentStyle:{
textAlign: 'center',
}
});
//register the component
AppRegistry.registerComponent('RnFirstApp', () => RnFirstApp);
The operation effect is as follows:
BadgeData.json file json data format is as follows:
{
"data"
:[
{
"icon"
:
"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3935885658,3389722307&fm=27&gp=0.jpg"
,
"title"
:
"Shoulder Bag"
},
{
"icon" :
"https://ss0.bdstatic.com/6ONWsjip0QIZ8tyhnq/it/u=4035832409,561546226&fm=77&src=1009",
"title" :
"链条包"
},
{
"icon" :
"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=66544896,1609626762&fm=27&gp=0.jpg",
"title" :
"钱包"
},
{
"icon" :
"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1300406055,3322031203&fm=27&gp=0.jpg",
"title" :
"手提包"
},
{
"icon" :
"https://ss3.baidu.com/-rVXeDTa2gU2pMbgoY3K/it/u=3589336874,4128426642&fm=202&gp=0.jpg&w_h=121_75&cs=3589336874,4128426642&ow_h=121_75&src=1010&mola=new&crop=v1",
"title" :
"双肩包"
},
{
"icon" :
"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1603855652,2015126712&fm=27&gp=0.jpg",
"title" :
"斜挎包"
}
]
}