反应原生 SectionList 组件

SectionList 组件是一个内置的 React Native 列表视图组件，用于呈现分段列表。顾名思义，它用于显示不同部分的数据列表。它是一个纯组件，支持大部分功能，如下拉刷新、滚动加载、分隔符、页眉和页脚等。SectionLists 主要用于在部分中显示列表。在不需要部分支持的情况下，应使用 FlatList 或 ScrollView 组件。

句法：

SectionList 道具：

renderItem：（必需）它是一个反应元素，用作默认渲染器，用于显示列表不同部分中的项目。
部分：（必需）要呈现的数据数组（不同部分具有不同的对象）。
extraData：它是一个通知列表重新渲染的属性（因为它实现了 PureComponent）。
initialNumToRender：初始加载屏幕时要渲染的项目数。
反转：如果设置为true，它将反转滚动的方向。
ItemSeparatorComponent：它是一个将在每个项目之间呈现的组件（顶部或底部除外）。
keyExtractor：用于提取列表中特定项目的唯一键。
ListEmptyComponent：它可以是在空列表的情况下呈现的组件或反应元素。
ListFooterComponent：它可以是在列表末尾呈现的组件或反应元素。
ListHeaderComponent：它可以是在列表开头呈现的组件或反应元素。
onEndReached：当滚动位置到达onEndReachedThreshold时调用的回调。
onEndReachedThreshold：这是一个值，它准确地告诉列表底部应该离屏幕结束多远，以便触发 onEndReached。
onRefresh：如果给出，一个 RefreshControl 将被插入到“Pull to Refresh”功能中。
onViewableItemsChanged：它是在行可视性更改期间调用的函数。
refresh：等待新数据时屏幕刷新时设置为true。
renderSectionFooter：在每个部分的底部呈现。
renderSectionHeader：在每个部分的顶部呈现。
SectionSeparatorComponent：呈现在每个section的顶部和底部，以区分它们。
stickySectionHeadersEnabled：用于使节标题粘在屏幕顶部。

部分列表方法：

flashScrollIndicators()：用于短暂显示滚动指示器。
recordInteraction()：用于通知列表可能发生的任何交互。
scrollToLocation()：用于滚动到任意指定sectionIndex和itemIndex处的item。

安装：这里我们将使用 Expo CLI 版本，它可以更流畅地运行您的 React Native 应用程序。请按照以下步骤一一设置您的 React 原生环境。

第 1 步：打开终端并通过以下命令安装 expo-cli。
```
npm install -g expo-cli
```
第2步：现在通过以下命令创建一个项目。
```
expo init sectionlist-demo
```
第 3 步：现在进入您的项目文件夹，即 sectionlist-demo
```
cd sectionlist-demo
```

项目结构：它看起来像这样：

示例：在此示例中，我们将了解如何使用基本的 SectionList 组件。

App.js

import React, { Component } from "react";
import { Text, View, StyleSheet, SectionList } from "react-native";
import { Icon } from "react-native-elements";
  
class App extends Component {
  state = {
    data: [
      {
        title: "Operating System",
        data: [
          "Processes & Threads",
          "Memory Management",
          "CPU Scheduling",
          "Process Synchronization",
          "Deadlock",
        ],
      },
      {
        title: "Computer Network",
        data: [
          "Data Link Layer",
          "Network Layer",
          "Transport Layer",
          "Application Layer",
          "Network Security",
        ],
      },
      {
        title: "DBMS",
        data: [
          "Entity Relationship Model",
          "Normalisation",
          "Transaction and Concurrency Control",
          "Indexing, B and B+ trees",
          "File Organization",
        ],
      },
    ],
  };
  
  render() {
    return (
      
        // Using Section List
         item + index}
          renderItem={({ item }) => (
            
              {item}
              
            
          )}
          renderSectionHeader={({ section: { title } }) => (
            {title}
          )}
        />
      
    );
  }
}
  
// Screen styles
const styles = StyleSheet.create({
  screen: {
    marginTop: 18,
  },
  header: {
    fontSize: 30,
    color: "#FFF",
    marginTop: 10,
    padding: 2,
    backgroundColor: "#C2185B",
    textAlign: "center",
  },
  row: {
    marginHorizontal: 15,
    marginTop: 10,
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    paddingHorizontal: 2,
  },
  rowText: {
    fontSize: 18,
  },
});
  
export default App;

运行应用程序的步骤：使用以下命令启动服务器。

npm run android

输出：如果你的模拟器没有自动打开，那么你需要手动打开。首先，去你的安卓工作室并运行模拟器。现在再次启动服务器。

参考： https://reactnative.dev/docs/sectionlist