React NativeのSectionListコンポーネントとは？使い方を実例付きで解説

SectionListコンポーネントとは

SectionListは、データをセクション（区分）ごとにまとめてリスト表示するためのReact Native標準コンポーネントです。連絡先アプリのように、カテゴリーや頭文字ごとに項目をグループ化して表示したい場合に特に便利です。FlatListと同様に仮想化された描画が行われるため、大量のデータでも高いパフォーマンスを維持できます。

SectionListの主な特徴は以下のとおりです。

• リスト全体に対するヘッダー／フッターのサポート
• 各セクションに対するヘッダー／フッターのサポート
• スクロール時の追加読み込み（無限スクロール）
• プル・トゥ・リフレッシュ（引っ張って更新）
• iOS / Android両方に対応した完全なクロスプラットフォーム性

SectionListの基本的な書式は次のとおりです。

<SectionList sections={DataContainer} keyExtractor={yourkeyextractor} renderItem={yourenderItem} renderSectionHeader={yoursectionheader} />

SectionListを使用するには、まずreact-nativeからインポートします。

import { SectionList } from "react-native";

SectionListの主なプロパティ一覧

実例1：SectionListでデータを表示する

まず、以下のようにSectionListをはじめ必要なコンポーネントをインポートします。

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

次に、SectionListに表示するデータを用意します。ここではthis.state.dataに格納しています。

this.state = {
    data: [
        {
            title: "Javascript Frameworks",
            data: ["Angular", "ReactJS", "VueJS", "ReactNative"]
        },
        {
            title: "PHP Frameworks",
            data: ["Laravel", "CodeIgniter", "CakePHP", "Symfony"]
        }
    ]
};

renderItem関数の実装

以下の関数は、渡されたアイテムを受け取り、Textコンポーネントとして表示する役割を担います。

renderItem = ({ item }) => {
    return (
        <View style={styles.item}>
            <Text >
                {item}
            </Text>
        </View>
    );
};

Textコンポーネントでアイテムを表示し、その外側をViewコンポーネントでラップしています。

SectionListの実装

続いて、sections、renderItem、keyExtractor、renderSectionHeaderの各プロパティを指定したSectionListの実装例です。

<View style={styles.container}>
    <SectionList
        sections={this.state.data}
        renderItem={this.renderItem}
        keyExtractor={(item, index) => index}
        renderSectionHeader={({ section: { title } }) => (
            <Text style={styles.header}>{title}</Text>
        )}
    />
</View>

stateのthis.state.dataをsectionsプロパティに渡し、this.renderItem関数をrenderItemプロパティに割り当てています。

keyExtractorには、データ配列の中から一意に特定できる値を返すように指定します。指定しない場合は配列のインデックスがkeyとして使われます。ここではitemとindexを組み合わせた文字列を一意のキーとしています。

keyExtractor={(item, index) => item + index}

セクションの見出し表示は、renderSectionHeaderプロパティが担当します。

以上をまとめた完全なコードがこちらです。

import React from "react";
import { SectionList , Text, View, StyleSheet} from "react-native";
export default class App extends React.Component {
    constructor() {
        super();
        this.state = {
        data: [
            {
                title: "Javascript Frameworks",
                data: ["Angular", "ReactJS", "VueJS", "ReactNative"]
            },
            {
                title: "PHP Frameworks",
                data: ["Laravel", "CodeIgniter", "CakePHP", "Symfony"]
            }
        ]
    };
}
renderItem = ({ item }) => {
    return (
        <View style={styles.item}>
            <Text >
                {item}
            </Text>
        </View>
    );
};
render() {
    return (
        <View style={styles.container}>
            <SectionList
                sections={this.state.data}
                renderItem={this.renderItem}
                keyExtractor={(item, index) => index}
                renderSectionHeader={({ section: { title } }) => (
                    <Text style={styles.header}>{title}</Text>
                    )}
                />
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop:20,
        marginHorizontal: 16
    },
    item: {
        backgroundColor: "#ccc2ff",
        padding: 20,
        marginVertical: 8
    },
    header: {
        fontSize: 32,
        backgroundColor: "#fff"
    }
});

実行結果

実例2：stickySectionHeadersEnabledでヘッダーを固定する

stickySectionHeadersEnabledプロパティの活用

stickySectionHeadersEnabledプロパティをtrueにすると、セクションヘッダーを画面上部に固定（スティッキー）表示できます。ユーザーがスクロールして次のセクションヘッダーが現れ、上部に達すると新しいヘッダーが入れ替わりで固定されます。この動作はすべてのヘッダーに対して同様に適用されます。

import React from "react";
import { SectionList , Text, View, StyleSheet} from "react-native";
export default class App extends React.Component {
    constructor() {
        super();
        this.state = {
            data: [
                 {
                     title: "Javascript Frameworks",
                     data: ["Angular", "ReactJS", "VueJS", "ReactNative"]
                 },
                 {
                     title: "PHP Frameworks",
                     data: ["Laravel", "CodeIgniter", "CakePHP", "Symfony"]
                 },
                 {
                     title: "Apache Frameworks",
                     data: ["Apache Flex", "Apache Crunch", "Apache CouchDB", "Apache Crail"]
                 }
            ]
        };
    }
    renderItem = ({ item }) => {
        return (
            <View style={styles.item}>
                <Text >
                    {item}
                </Text>
            </View>
        );
    };
    render() {
        return (
            <View style={styles.container}>
                <SectionList
                    stickySectionHeadersEnabled={true}
                    sections={this.state.data}
                    renderItem={this.renderItem}
                    keyExtractor={(item, index) => index}
                    renderSectionHeader={({ section: { title } }) => (
                       <Text style={styles.header}>{title}</Text>
                    )}
                />
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop:20,
        marginHorizontal: 16
    },
    item: {
        backgroundColor: "#ccc2ff",
        padding: 20,
        marginVertical: 8
    },
    header: {
        fontSize: 32,
        backgroundColor: "#fff"
    }
});

実行結果