React Native SectionList

摘要: 在本教程中，您将学习如何使用 React Native SectionList 组件来渲染分组数据。

React Native SectionList 简介

在 React Native 中，FlatList 组件在渲染大型扁平列表方面非常有效。要渲染分组数据的列表，您可以使用 SectionList 组件。

首先，从 react-native 库导入 SectionList 组件

import {SectionList} from 'react-native';Code language: JavaScript (javascript)

其次，将两个必需的 props 传递给 SectionList 组件

<SectionList
   sections = {data}
   renderItem = {renderItem}
/>Code language: HTML, XML (xml)

与 FlatList 组件类似，SectionList 需要两个 props

• sections 是要渲染的项目的数组。
• renderItem 是一个函数，用于确定如何渲染每个项目。

SectionList 组件会延迟渲染项目，这意味着它只渲染屏幕上可见的项目。

React Native SectionList 组件示例

以下示例演示了如何使用 SectionList 组件来渲染分组项目的列表

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

export const sections = [
  {
    title: 'Fruits',
    data: [
      { id: 1, name: 'Apple', emoji: '🍎' },
      { id: 2, name: 'Banana', emoji: '🍌' },
      { id: 3, name: 'Cherry', emoji: '🍒' },
      { id: 4, name: 'Grapes', emoji: '🍇' },
    ],
  },
  {
    title: 'Vegetables',
    data: [
      { id: 5, name: 'Carrot', emoji: '🥕' },
      { id: 6, name: 'Potato', emoji: '🥔' },
      { id: 7, name: 'Broccoli', emoji: '🥦' },
      { id: 8, name: 'Spinach', emoji: '🥬' },
    ],
  },
  {
    title: 'Dairies',
    data: [
      { id: 9, name: 'Milk', emoji: '🥛' },
      { id: 10, name: 'Cheese', emoji: '🧀' },
      { id: 12, name: 'Butter', emoji: '🧈' },
    ],
  },
];

const App = () => {
  const renderItem = ({ item }) => {
    return (
      <View style={styles.listItem}>
        <Text style={styles.listTitle}>{item.name}</Text>
        <Text style={styles.listTitle}>{item.emoji}</Text>
      </View>
    );
  };

  const renderSectionHeader = ({ section: { title } }) => (
    <Text style={styles.header}>{title}</Text>
  );

  const renderSectionSeparator = () => <View style={styles.sectionSeparator} />;

  const renderItemSeparatorComponent = () => (
    <View style={styles.itemSeparator} />
  );

  return (
    <SafeAreaView style={styles.container}>
      <SectionList
        sections={sections}
        renderItem={renderItem}
        renderSectionHeader={renderSectionHeader}
        SectionSeparatorComponent={renderSectionSeparator}
        ItemSeparatorComponent={renderItemSeparatorComponent}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  header: {
    fontSize: 24,
    textAlign: 'center',
    paddingVertical: 5,
  },
  sectionSeparator: {
    height: 1,
    backgroundColor: '#ccc',
  },
  itemSeparator: {
    height: 1,
    backgroundColor: '#eee',
  },

  listItem: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    padding: 8,
  },
  listTitle: {
    fontSize: 24,
  },
});

export default App;Code language: JavaScript (javascript)

输出

工作原理。

首先，定义 sections 数组，它包含一个对象列表，每个对象都具有 title 和 data 属性。在实际应用中，您可能从本地数据库或 API 调用中获取此数据。

其次，使用 SectionList 组件渲染 sections 数组

<SectionList
   sections={sections}
   renderItem={renderItem}
   renderSectionHeader={renderSectionHeader}
   SectionSeparatorComponent={renderSectionSeparator}
   ItemSeparatorComponent={renderItemSeparatorComponent}
/>Code language: HTML, XML (xml)

在此代码中，我们将 props 传递给 SectionList 组件

• sections 是要渲染的项目的数组。
• renderItem 是一个函数，用于渲染 sections 数组中的每个项目。
• renderSectionHeader 是一个函数，用于渲染节标题。
• renderSectionSeparator 是一个函数，用于渲染节分隔符。
• renderItemSeparatorComponent 是一个函数，用于渲染项目分隔符。

第三，定义传递给 SectionList 组件 props 的相应函数。

总结

• 使用 SectionList 组件来有效地渲染具有节标题的大型列表。