React Native 之 SectionList的使用

高性能的分组(section)列表组件，支持下面这些常用的功能：

• 完全跨平台。
• 行组件显示或隐藏时可配置回调事件。
• 支持单独的头部组件。
• 支持单独的尾部组件。
• 支持自定义行间分隔线。
• 支持分组的头部组件。
• 支持分组的分隔线。
• 支持多种数据源结构
• 支持下拉刷新。
• 支持上拉加载。

这个是效果：

image.png

第一步：准备数据源：Car.json

{"data": [
    {
      "cars": [
        {
          "icon": "m_180_100.png",
          "name": "AC Schnitzer"
        },
        {
          "icon": "m_92_100.png",
          "name": "阿尔法·罗密欧"
        },
        {
          "icon": "m_9_100.png",
          "name": "奥迪"
        },
        {
          "icon": "m_97_100.png",
          "name": "阿斯顿·马丁"
        }
      ],
      "title": "A"
    }........
}

第二步：

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    SectionList,
    Dimensions,
    Image
} from 'react-native';
 
const dimension = Dimensions.get('window')
var Car = require('./Car.json');
 
var itemWidth = 100;
var cols = 3;
var cMargin = (dimension.width - (itemWidth * cols)) / 4.0;
var rMargin = 12;
 
export default class SectionListView1 extends Component {
 
    componentDidMount() {
 
    }
 
    _renderSectionHeader(info) {
        return (
            
                
                    {info.section.title}
                
            
        )
    }
 
    _renderItem(info) {
 
        return (
            
                
                
                    {info.item.name}
                
            
        )
    }
 
 
    _separatorCom() {
        return (
            
 
            
        )
    }
 
    render() {
        var dataSource = [];
        for (var i = 0; i < Car.data.length; i++) {
            let datas = [];
            for (var j = 0; j < Car.data[i].cars.length; j++) {
                datas.push(Car.data[i].cars[j]);
            }
            dataSource.push({key: i, data: datas, title: Car.data[i].title});
        }
 
        return (
            
                {alert("刷新")}}
                    // ItemSeparatorComponent={this._separatorCom}
                    // SectionSeparatorComponent={() => }
                    keyExtractor={(item, index) => ("index" + index + item)}
                    // onEndReached={(info)=>{alert("到达底部")}}
                    // onEndReachedThreshold={0}
                    // stickySectionHeadersEnabled={true}
                    ListHeaderComponent={() => 这个是我的表头}
                    ListFooterComponent={() => 这个是我的表尾}
                    contentContainerStyle={styles.sectionListStyle}//设置cell的样式
                    pageSize={4}
 
 
                />
            
        );
    }
}
 
const styles = StyleSheet.create({
        sectionListStyle: {
 
            flexDirection: 'row',
            flexWrap: 'wrap',
            alignItems: 'flex-start',
            backgroundColor: '#dd6ddd',
        },
        sectionStyle: {
            width: dimension.width,
            padding: 12,
            backgroundColor: '#21c6cd',
            color: '#fff'
        },
        cellStyle: {
            alignItems: 'center',
            borderRadius: 5,
            borderWidth: 1,
            borderColor: '#ff496b',
            marginLeft: cMargin,
            marginTop:rMargin,
            marginBottom:rMargin,
            padding: 6,
            width:itemWidth
        },
        imageStyle: {
            width: 70,
            height: 70
        }
    })
;
 
 
module.exports = SectionListView1;

如果大家把上面描述的的SectionList的下面两句代码删除，则会出现单行情况，如果有兴趣，自行调试

contentContainerStyle={styles.sectionListStyle} //设置cell的样式

pageSize={4}

renderItem：定义每个元素组件的渲染方式，默认传入参数rowData，要访问其中的"title"可以通过rowData.item.title访问到。
ItemSeparatorComponent：定义每个元素之间分割组件

ListHeaderComponent：定义头部组件
ListFooterComponent：定义底部组件

ListEmptyComponent：data为空时显示的组件

columnWrapperStyle：定义每个组件栏的包裹样式，不支持单行组件
numColumns：number，定义每行显示的元素个数
refreshControl：定义头部刷新组件，例如：

       refreshControl={ //下拉刷新组件

}

onEndReached：在列表滚动到底部一定距离时调用这个函数，一般在此定义滚动到底部时加载新的数据。
onEndReachedThreshold：决定当距离内容最底部还有多远时触发onEndReached回调。注意此参数是一个比值而非像素单位。比如，0.5表示距离内容最底部的距离为当前列表可见长度的一半时触发。