React Native常用组件之ListView创建九宫格

还是老规矩将要使用的控件引入进来

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);

效果图:

代码截图: