react native SectionList 使用详解

SectionList 和FlatList的基本一样，和FlatList一样的地方就不介绍啦。那什么时候使用FlatList，什么时候使用SectionList呢？如果你的列表不需要分组，那么可以使用结构更简单的 FlatList。

在0.43版本中，如果希望section的头部能够吸顶悬浮，请暂时先使用老版的 ListView。下一个版本开始可以支持悬浮的section头部。

属性：

SectionSeparatorComponent：组之间的分割控件
renderSectionHeader：组的头部
sections：列表的数据

Demo:

import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    SectionList,
} from 'react-native';

export default class SectionListDemo extends Component {

    _renderItem = (info) => {
        var txt = 'index:' + info.index + '     ' + info.item.title;
        var bgColor = info.index % 2 == 0 ? 'red' : 'blue';
        return <Text
            style={{height:100,textAlignVertical:'center',backgroundColor:bgColor,color:'white',fontSize:15}}>{txt}</Text>
    }

    _sectionComp = (info) => {
        var txt = 'key:' + info.section.key;
        return <Text
            style={{height:50,textAlign:'center',textAlignVertical:'center',backgroundColor:'black',color:'white',fontSize:30}}>{txt}</Text>
    }

    render() {
        var sections = [];
        for (var i = 0; i < 10; i++) {
            var datas = [];
            for (var j = 0; j < 10; j++) {
                datas.push({title: 'title:' + j});
            }
            sections.push({key: i, data: datas});
        }
        return (
            <View style={{flex:1}}>
                <SectionList
                    renderSectionHeader={this._sectionComp}
                    renderItem={this._renderItem}
                    sections={sections}/>
            </View>
        );
    }
}

效果图：

其余属性请查看FlatList

github下载地址