React Native SectionList

17 Mar 2025 | 阅读 2 分钟

React Native 的 SectionList 组件是一个列表视图组件，它将数据列表分成逻辑部分。可以使用其 section header 属性 renderSectionHeader来实现分割数据。

要实现 SectionList 组件，我们需要从 'react-native' 库中导入 SectionList。

SectionList 的属性

sections	renderItem	initialNumToRender	keyExtractor
renderSectionHeader	renderSectionFooter	onRefresh	inverted
extraData	onEndReached	keyExtractor	legacyImplementation
onViewableItemsChanged	refreshing	removeClippedSubviews	ListHeaderComponent
SectionSeparatorComponent	stickySectionHeadersEnabled	onEndReachedThreshold	ListEmptyComponent

React Native SectionList 示例

在这个例子中，我们创建一个带有标题和数据的 SectionList。sections 属性用于创建标题和数据值的列表。renderSectionHeader 显示列表视图的标题部分。

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

export default class SectionListBasics extends Component {
    render() {
        return (
            <View style={styles.container}>
                <SectionList
                    sections={[
                        {title: 'A', data: ['ALTERED','ABBY','ACTION U.S.A.','AMUCK','ANGUISH']},
                        {title: 'B', data: ['BEST MEN','BEYOND JUSTICE','BLACK GUNN','BLOOD RANCH','BEASTIES']},
                        {title: 'C', data: ['CARTEL', 'CASTLE OF EVIL', 'CHANCE', 'COP GAME', 'CROSS FIRE',]},
                    ]}
                    renderItem={({item}) => <Text style={styles.item}>{item}</Text>}
                    renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}
                    keyExtractor={(item, index) => index}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#5ead97"
    },
    sectionHeader: {
        paddingTop: 2,
        paddingLeft: 10,
        paddingRight: 10,
        paddingBottom: 2,
        fontSize: 22,
        fontWeight: 'bold',
        color: "#fff",
        backgroundColor: '#8fb1aa',
    },
    item: {
        padding: 10,
        fontSize: 18,
        height: 44,
    }
})

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => SectionListBasics);

输出

在 SectionList 中添加分隔符

ItemSeparatorComponent 属性在数据列表之间添加分隔符。使用此属性，调用一个renderSeparator方法，我们在其中添加一个 View 组件作为分隔符。

renderSeparator = () => {
    return (
        <View
            style={{
                height: 1,
                width: "100%",
                backgroundColor: "#000",
            }}
        />
    );
};


ItemSeparatorComponent={this.renderSeparator}

对 SectionList 项目执行操作

要在单击（按下）列表项时执行操作，我们使用 onPress 属性。 onPress 属性并在另一个方法 getListViewItem 中处理事件。

//handling onPress action
    getListViewItem = (item) => {
        alert(item);
    }


renderItem={({item}) => <Text style={styles.item}
  onPress={this.getListViewItem.bind(this, item)}>{item}</Text>}

输出

下一个主题React Native Touchables

React Native SectionList

SectionList 的属性

React Native SectionList 示例

在 SectionList 中添加分隔符

对 SectionList 项目执行操作

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

React Native 教程

指南

API

导航

存储

其他

React Native SectionList

SectionList 的属性

React Native SectionList 示例

在 SectionList 中添加分隔符

对 SectionList 项目执行操作

相关帖子

React Native Touchables

React Native StatusBar

React Native ListView

React Native ScrollView

带动画的 ProgressBar

React Native State

使用 Flex 定位元素

React Native FlatList

React Native TextInput

Layout 和 Flexbox

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器