> 注意：
安卓本地图片要存在res的drawable目录下，记住uri对应的图片名称是不包含后缀的。这样图片能够被正确加载并且显示出来。
~~~
<Image style={{width:100,height:100}} source={{uri:'icon'}} />
~~~
####bag.json
~~~
{
"data":[
{
"icon":"danjianbao",
"title":"单肩包",
},
{
"icon":"liantiaobao",
"title":"链条包",
},
{
"icon":"xiekuabao",
"title":"斜挎包",
},
{
"icon":"qianbao",
"title":"钱包",
},
{
"icon":"shoutibao",
"title":"手提包",
},
{
"icon":"shuangjianbao",
"title":"双肩包",
},
]
}
~~~
#### 源代码
~~~
var Dimensions = require('Dimensions');
var {width,height,scale} =Dimensions.get('window');
//加载jsoN
var bag = require('./bag.json');
//设置图片容器宽度
var iWidth=100;
//一行显示几个图片
var row=3;
//水平间距
var vMargin=(width-iWidth*row)/(row+1);
//垂直间距
var hMargin=20;
class AwesomeProject5 extends Component {
render() {
return (
<View style={styles5.container}>
{this.getBageData()}
</View>
);
}
getBageData(){//获取json的数据
let bagArr=[];
for (var i = 0; i < bag.data.length; i++) {//遍历json,组合数据
var item=bag.data[i];
bagArr.push(
<View style={styles5.innerView} key={i}>
<Image source={{uri:item.icon}} style={styles5.imageStyle} />
<Text style={styles5.titlesStyle}>{item.title}</Text>
</View>
);
};
return bagArr;
}
}
const styles5 = StyleSheet.create({
container: {
flexDirection:'row',
flexWrap:'wrap',
},
innerView:{
width:100,
height:130,
marginLeft:vMargin,
marginTop:hMargin,
backgroundColor:'#cccccc',
alignItems:'center'
},
imageStyle:{
width:100,
height:100
},
titlesStyle:{
}
});
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject5);
~~~
