react native SectionList 使用详解

来源：互联网发布：手机键盘软件编辑：程序博客网时间：2024/06/07 10:35

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下载地址

1 0