React Native SectionList

概要: このチュートリアルでは、React Native SectionList コンポーネントを使ってグループ化されたデータを表示する方法を学習します。

React Native SectionList の紹介

React Native では、FlatList コンポーネントが大きなフラットリストの表示に効率的です。グループ化されたデータのリストを表示するには、SectionList コンポーネントを使用できます。

最初に SectionList コンポーネントを react-native ライブラリからインポートします

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

次に、SectionList コンポーネントに 2 つの必須のプロップを渡します

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

FlatList コンポーネントと同様に、SectionList には 2 つのプロップが必要です

• 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)

出力

仕組み:

最初に、title プロパティーと data プロパティーをそれぞれ持つオブジェクトのリストを含む配列である sections を定義します。実際には、このデータをローカルデータベースまたは API 呼び出しから取得します。

次に、SectionList コンポーネントを使用して sections 配列を表示します

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

このコードでは、SectionList コンポーネントにプロップを渡します

• sections は表示するアイテムの配列です。
• renderItem は、sections 配列内の各アイテムを表示する関数です。
• renderSectionHeader はセクションヘッダーを表示する関数です。
• renderSectionSeparator はセクションの区切りを表示する関数です。
• renderItemSeparatorComponent はアイテムの区切りを表示する関数です。

最後に、SectionList コンポーネントのプロップに渡される対応する関数を定義します。

概要

• セクションヘッダーを使用した大きなリストを効率的に表示するには、SectionList コンポーネントを使用します。