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