#### 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" : "短信分享"
}
]
}
~~~
