还是老规矩将要使用的控件引入进来
importReact, {Component}from'react';
import{
AppRegistry,
StyleSheet,
Text,
View,
ListView,
Image,
TouchableOpacity,//这个是一个不透明度的一个触摸控件
AlertIOS
}qrom'react-native';
导入需要的json和获取屏幕尺寸
varshareData=require('./shareData.json');
//获取屏幕的尺寸
varDimensions=require('Dimensions');
3计算九宫格的cell
varscreenwidth=Dimensions.get('window').width;
varcols=3;
varCellWH=100;
varjianju=(screenwidth-CellWH*cols)/(cols+1);
varHjanju=20;
4创建
varjiugonggeListDome= React.createClass({
getInitialState(){
vards=newListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
return{
dataSource:ds.cloneWithRows(shareData.data)
}
},
render(){
{/*创建数据源*/}
return(
dataSource={this.state.dataSource}
renderRow={this.renderRow}
contentContainerStyle={jiugongeStyle.ListViewStyle}
/>
)
},
renderRow(rowData, sectionID, rowID, highlightRow){
return(
{rowData.title}
);
}
})
5设置样式
constjiugongeStyle= StyleSheet.create({
//这里是listV的Style
ListViewStyle:{
flexDirection:'row',
flexWrap:'wrap',
alignItems:'flex-start'
},
ViewStyle:{
width:CellWH,
height:CellWH,
marginLeft:jianju,
marginTop:Hjanju
},
ImageStyle:{
width:100,
height:100
},
TitleStyle:{
}
});
AppRegistry.registerComponent('ListViewDome', () =>jiugonggeListDome);
效果图:
代码截图:
