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 <Text key={info.section.key}
            style={{ height: 60, textAlignVertical: 'center', backgroundColor: "#ffffff", color: '#5C5C5C', fontSize: 15 }}>{txt}</Text>
    };
  //分组
    _sectionComp = (info) => {
        const txt = info.section.key;
        return <Text
            style={{ height: 15, textAlign: 'center', textAlignVertical: 'center', backgroundColor: '#E0E0E0', color: 'white', fontSize: 14 }}>{txt}</Text>
    };

    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 (
            <View style={{ flex: 1 }}>
                <SectionList
                    renderSectionHeader={this._sectionComp}
                    renderItem={this._renderItem}
                    sections={sections}
                    //设置列表之间的样式，边框
                    ItemSeparatorComponent={() => <View style={{height:1,backgroundColor:"#F0F0F0"}}></View>}
                    // ListHeaderComponent={() => <View style={{ backgroundColor: '#25B960', alignItems: 'center', height: 30 }}><Text style={{ fontSize: 18, color: '#ffffff' }}>通讯录</Text></View>}
                    ListFooterComponent={() => <View style={{ backgroundColor: '#20a1a1', alignItems: 'center', height: 20,justifyContent:'center'}}><Text style={{ fontSize: 10, color: '#ffffff' }}>没有更多啦</Text></View>}
                />
            </View>
        );
    }
}

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

image.png image.png