react native 分组列表

最新推荐文章于 2024-08-31 07:10:27 发布

qq_39910762

最新推荐文章于 2024-08-31 07:10:27 发布

阅读量746

点赞数

分类专栏： react native 文章标签：分组 sectionList

本文链接：https://blog.youkuaiyun.com/qq_39910762/article/details/82758317

版权

react native 专栏收录该内容

24 篇文章

订阅专栏

本文通过实例详细介绍了React Native中SectionList组件的使用方法，包括数据绑定、分组展示及行间分隔线等特性，并对比了其与FlatList的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引用官网：如果你的列表不需要分组(section)，那么可以使用结构更简单的<FlatList>

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


import Dimensions from 'Dimensions'
const { width,height } = Dimensions.get('window')

let data = [
    {
        "key": "A",
        "data": [
            {
                "title": "正许六",
                "name": "阿多标"
            },
            {
                "title": "于南装",
                "name": "阿人院"
            },
            {
                "title": "准象白",
                "name": "阿照速"
            }
        ],
    },
    {
        "key": "B",
        "data": [
            {
                "title": "切规指",
                "name": "白低族"
            },
            {
                "title": "海对导",
                "name": "白义局"
            },
            {
                "title": "切历联",
                "name": "白北选"
            }
        ],
    },
    {
        "key": "C",
        "data": [
            {
                "title": "三放类",
                "name": "陈分革"
            },
            {
                "title": "关党部",
                "name": "陈然传"
            },
            {
                "title": "京需运",
                "name": "陈土务"
            }
        ],
    }
  ]

export default class List extends Component {
    constructor(props){
        super(props);
        this.state = {
            data: data
        }
    }
    render() {
        return (
            <View style={styles.container}>
                <SectionList
                    sections={this.state.data} //数据源,类似于<FlatList>中的data属性
                    renderSectionHeader={this._sectionComp} //每个section的头部渲染
                    renderItem={this._renderItem} //渲染每一个section中的每一个列表项
                    keyExtractor={(item,index) => index.toString()} //为给定的item生成一个不重复的key
                    ItemSeparatorComponent={this._itemSeparator} //行与行之间的分隔线
                    SectionSeparatorComponent={this._sectionSeparator} //在每个`section`的顶部和底部渲染
                    stickySectionHeadersEnabled={false} //是否吸顶,ios默认为true;Android默认为false
                />  
            </View>
        );
    }
    _sectionComp = (item) => {
        return(
            <Text style={styles.key}>{item.section.key}</Text>
        )
    }
    _renderItem = (item) => {
        return(
            <Text style={styles.name}>{item.item.name}</Text>
        )
    }
    _itemSeparator = () => {
        return(
            <Text style={styles.separator}></Text>
        )
    }
    _sectionSeparator = () => {
        return(
            <Text style={[styles.separator,{backgroundColor:'#f00'}]}></Text>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    key: {
        width: width,
        height: 50,
        backgroundColor: 'cyan',
        lineHeight: 50,
        textAlign: 'center',
    },
    name: {
        width: width,
        height: 35,
        backgroundColor: '#fff',
        lineHeight: 35,
        paddingLeft: 20,
    },
    separator: {
        height: 2,
    }
})

效果：stickySectionHeadersEnabled为false：