#### Jiugongge.js
~~~
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
TouchableOpacity,
ListView,
Dimensions
} from 'react-native';
// 導入數據
var shareData=require('../shareData.json');
// 獲取分辨率
var {width,hegiht} = Dimensions.get('window');
// 設置列數
var row=3;
// 獲取間距
var vMargin=(width-row*80)/(row+1);
class Jiugongge extends Component {
// 設置初始化狀態
constructor(props){
super(props);
var ds=new ListView.DataSource({rowHasChanged:(r1,r2)=>r1!==r2});
this.state={
dataSource:ds.cloneWithRows(shareData.data)
}
}
render() {
return (
/*dataSource設置數據源 renderRow 渲染視圖 contentContainerStyle樣式 */
<ListView dataSource={this.state.dataSource}
renderRow={this.renderRowView}
contentContainerStyle={styles.container} />
);
}
// 渲染單行組件
renderRowView(rowData){
return (
<View style={styles.innerStyle}>
<Image style={styles.imgStyle} source={{uri:rowData.icon}} />
<Text>{rowData.title}</Text>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
width:width,
flexDirection:'row',
flexWrap:'wrap',
},
imgStyle:{
width:80,
height:80
},
innerStyle:{
width:80,
height:120,
marginLeft:vMargin,
marginTop:15,
alignItems:'center'
}
});
module.exports=Jiugongge;
~~~
#### shareData.json
~~~
{
"data" : [
{
"icon" : "icon1",
"title" : "小碼哥分享"
},
{
"icon" : "icon2",
"title" : "開心網分享"
},
{
"icon" : "icon3",
"title" : "QQ分享"
},
{
"icon" : "icon4",
"title" : "QQ空間分享"
},
{
"icon" : "icon5",
"title" : "QQ微博分享"
},
{
"icon" : "icon6",
"title" : "人人網分享"
},
{
"icon" : "icon7",
"title" : "微信分享"
},
{
"icon" : "icon8",
"title" : "微博分享"
},
{
"icon" : "icon9",
"title" : "朋友圈分享"
},
{
"icon" : "icon10",
"title" : "短信分享"
}
]
}
~~~
