ReactNative中SectionList的使用

ReactNative长列表数据组件一共有三个：

- ListView 核心组件，数据量大时性能较差，占用内存持续增加，故设计出来FlatList组件。

- FlatList 用于替代ListView，支持下拉刷新和上拉加载。

- SectionList 高性能的分组列表组件。

相比之下，SectionList比ListView简单一些，ListView在使用之前还需要创造datasource数据源，初始化datasource的值等。

1、导入

import {
    StyleSheet,
    Text,
    ListView,
    SectionList,
} from 'react-native';

2、使用

export default class SectionListTest extends Component{
    constructor(props){
        super(props);
    }

    //渲染列表
    _renderItem = (info) => {
        const txt = '  ' + info.item.title;
        return {txt}
    };
  //分组
    _sectionComp = (info) => {
        const txt = info.section.key;
        return {txt}
    };

    render() {
        const sections = [
            { key: "A", data: [{ title: "阿童木" }, { title: "阿玛尼" }, { title: "爱多多" }] },
            { key: "B", data: [{ title: "表哥" }, { title: "贝贝" }, { title: "表弟" }, { title: "表姐" }, { title: "表叔" }] },
            { key: "C", data: [{ title: "成吉思汗" }, { title: "超市快递" }] },
            { key: "W", data: [{ title: "王磊" }, { title: "王者荣耀" }, { title: "往事不能回味" },{ title: "王小磊" }, { title: "王中磊" }, { title: "王大磊" }] },
        ];

        return (
            
                 }
                    // ListHeaderComponent={() => 通讯录}
                    ListFooterComponent={() => 没有更多啦}
                />
            
        );
    }
}

ItemSeparatorComponent与ListView中的renderSeparator作用是一样的，用于设置每个数据之间的样式
ListHeaderComponent和ListFooterComponent作用是设置列表头部和底部的提示性用语
运行截图：

image.png

image.png