> 注意：
安卓本地圖片要存在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);
~~~
