ListView简单使用《二》—CollectionView效果实现案例

本文主要是介绍ListView简单使用《二》—CollectionView效果实现案例，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

此案例是在ListView基础上进行的进一步深化使用，步骤与ListView一致，首先还是设置ListView的DataSource，注意事项与前一篇 ListView的简单使用《一》—>普通图文展示案例一致，直接上代码：

getInitialState(){var dss = new ListView.DataSource({rowHasChanged:(r1,r2)=> r1 !== r2});return {dataSource:dss.cloneWithRows(ImgDatas.data)}
},

向界面添加展示数据的ListView，此处为达到CollectionView的效果，最重要的是对ListView的 contentContainerStyle 进行设置，即对ListView里面的内容进行设置。

render() {return (<View style={styles.container}><ListViewdataSource={this.state.dataSource}renderRow={this.renderRow}contentContainerStyle={styles.listViewStyle}/></View>);
},

添加每行显示的控件，并进行可点击设置，并进行返回，renderRow方法中的四个参数依次为，每行的数据、行ID，组ID，以及高亮显示的行，可省略不写，也可根据自己的需求，进行相应的添加。

 renderRow(rowData,rowID,sectionID,highlightRow){return(<TouchableOpacity activeOpacity={0.5} onPress={this.cellTouched}><View style={styles.cellContentViewStyle}><Image style={styles.cellImageStyle} source={{uri:rowData.icon}}/><Text>{rowData.title}</Text></View></TouchableOpacity>);
},

每行的点击事件，点击之后需要做什么都在这个方法中实现

cellTouched(){
},

在该案列中，最主要的是对界面布局的CSS样式的设置，设置如下：

const styles = StyleSheet.create({container: {flex: 1,},listViewStyle:{
flexDirection:'row',
// //多行显示
flexWrap: "wrap",
alignItems: 'flex-start',
},
cellContentViewStyle:{
width:cellWH,
height:cellWH,
marginLeft:Hmargin,
marginTop:Vmargin,
alignItems:'center'
},
cellImageStyle:{
width:80,
height:80,
marginBottom:5,
},
});

需要特别注意的是：
1.我们设置collectionView效果时，主要是对ListView的content进行设置，设置为多个行显示在一排上，而不是单独一行就占一排的位置，因此需要设置flexDirection为横向显示，值为row。
2.当显示为横排之后，就不会出现一行占一排的情况，但当我们直接设置flexWrap为换行显示即值为wrap，我们并没有看到其他对应的控件展示，然而ListView却占了相应的空间和大小，点击其他区域的时候，响应事件的是第一排显示的几个，其实并不是没有显示出来，只是显示到屏幕之外去了，我们需要设置每排都从左侧位置开始，即可看见所有元素，即设置alignItems为侧轴起始边界开始：如下：
alignItems: 'flex-start'

本案例中用到的几个比较重要的属性：

1.获取屏幕宽度

var Dimensions = require('Dimensions');
var windowWidth = Dimensions.get('window').width;

2.设置每行显示个数

var cols = 3;

3.设置每个cell的宽度

var cellWH = 100;

4.计算cell中间距离

var Hmargin = (windowWidth - cellWH * cols) / (cols + 1);

5.ListView设置上边距

var Vmargin = 25;

效果图如下：