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

最新推荐文章于 2021-05-31 04:38:03 发布

搬砖程序员

最新推荐文章于 2021-05-31 04:38:03 发布

阅读量1.3k

点赞数 1

分类专栏： React-Native 笔记文章标签： React-Native listview CollectinView 跨平台开发基础教程

本文链接：https://blog.csdn.net/svendson/article/details/53036073

版权

React-Native 笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

此案例是在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}>
          <ListView
              dataSource={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;

效果图如下：