React Native 中 SectionList 组件的使用方法是什么？

推荐答案

// www.javascriptcn.com code example
import React from 'react';
import { SectionList, Text, View, StyleSheet } from 'react-native';

const DATA = [
  {
    title: 'Main dishes',
    data: ['Pizza', 'Burger', 'Risotto'],
  },
  {
    title: 'Sides',
    data: ['French Fries', 'Onion Rings', 'Fried Shrimps'],
  },
  {
    title: 'Drinks',
    data: ['Water', 'Coke', 'Beer'],
  },
];

const App = () => {
  return (
    <SectionList
      sections={DATA}
      keyExtractor={(item, index) => item + index}
      renderItem={({ item }) => (
        <View style={styles.item}>
          <Text style={styles.title}>{item}</Text>
        </View>
      )}
      renderSectionHeader={({ section: { title } }) => (
        <Text style={styles.header}>{title}</Text>
      )}
    />
  );
};

const styles = StyleSheet.create({
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
  },
  header: {
    fontSize: 32,
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 24,
  },
});

export default App;

本题详细解读

SectionList 组件简介

SectionList 是 React Native 中用于渲染带有分组的列表的组件。它类似于 FlatList，但支持将数据分组显示，并且可以为每个分组添加标题。

主要属性

1. sections: 这是 SectionList 的核心属性，用于传递分组数据。它是一个数组，每个元素代表一个分组，包含 title 和 data 两个字段。title 是分组的标题，data 是该分组下的数据项。

2. renderItem: 用于渲染每个数据项。它接收一个对象作为参数，包含 item 和 index 等字段。item 是当前数据项，index 是当前数据项的索引。

3. renderSectionHeader: 用于渲染每个分组的标题。它接收一个对象作为参数，包含 section 字段，section 包含当前分组的 title 和 data。

4. keyExtractor: 用于为每个数据项生成唯一的 key。它接收 item 和 index 作为参数，返回一个字符串作为 key。

示例代码解析

• DATA: 这是一个包含多个分组的数组，每个分组包含 title 和 data 字段。

• renderItem: 每个数据项被渲染为一个 View，内部包含一个 Text 组件，显示数据项的内容。

• renderSectionHeader: 每个分组的标题被渲染为一个 Text 组件，显示分组的标题。

• keyExtractor: 使用 item + index 作为每个数据项的唯一 key。

样式

• item: 每个数据项的样式，设置了背景颜色、内边距和垂直间距。

• header: 分组标题的样式，设置了字体大小和背景颜色。

• title: 数据项的文本样式，设置了字体大小。

通过以上代码，你可以轻松地在 React Native 中使用 SectionList 组件来渲染带有分组的列表。