SectionList组件

最新推荐文章于 2024-04-29 00:21:11 发布

FreeBSFree

最新推荐文章于 2024-04-29 00:21:11 发布

阅读量849

点赞数

分类专栏： Rect-Native

本文链接：https://blog.csdn.net/qq_17190231/article/details/88388615

版权

Rect-Native 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

本文详细探讨了React中的SectionList组件，它用于展示分段列表数据，支持自定义头部和索引条。通过实例解析，阐述了如何配置SectionList，包括数据结构、渲染列表项、滚动性能优化等方面，帮助开发者高效构建长列表应用。

摘要由CSDN通过智能技术生成

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

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(
        {test: i, data: datas}
    );
}

export default class App extends Component {

    _renderItem = ({section, item, index}) => {
        var txt = 'section:' + section.test + '  item:' + item.title + '  index:' + index;
        return (
            <TouchableHighlight onPress={() => this._onPress(index, item)}>
                <View style={{height: 50, backgroundColor: 'red'}}>
                    <Text style={{textAlignVertical: 'center', textAlign: 'center'}}>{txt}</Text>
                </View>
            </TouchableHighlight>
        )
    }

    _renderSectionHeader = (section) => {
        var txt = 'section: ' + section.section.test;
        return (
            <View style={{height: 30, backgroundColor: 'blue'}}>
                <Text style={{textAlign: 'center', textAlignVertical: 'center', fontSize: 18}}>
                    {txt}
                </Text>
            </View>
        );
    }

    _keyExtractor = (item, index) => {
        return index;
    }

    render() {

        return (
            <View style={{flex: 1, backgroundColor: 'white'}}>
                <SectionList
                    sections={sections}
                    renderItem={this._renderItem}
                    renderSectionHeader={this._renderSectionHeader}
                    keyExtractor={this._keyExtractor}
                />
            </View>
        );
    }

    _onPress(index,item) {

        alert(item.title);
    }

}
const styles = StyleSheet.create({});

注意：
1. FlatList的必选协议: 
   1. sections={}数据源,是数组中嵌套了字典，字典里往往有两对键值对，一对键值对对应着sectionHeader的标题，另一对对应着item的数据源，并且是个数组结构。
   2. renderItem={section,item,index}数据源回调，section是当前section的数据源，item是当前的item数据源，index是当前的item索引。
   3. renderSectionHeader={section}section头部回调，该入参section。section.section是得到了当前section的数据源。
2. 可选协议  
   1. ListHeaderComponent={}头部控件回调
   2. ListFooterComponent={}脚部控件回调
   3. ItemSeparatorComponent={}分割线回调
3. 回调
   1. 以上回调和普通函数回调不相同，需要注意。