SectionListコンポーネントとは何ですか？ReactNativeでそれを使用する方法は？

セクションでリストをレンダリングするのに役立つインターフェース。 SectionListの重要な機能のいくつかは-

• リストへのヘッダー/フッターのサポート
• セクションへのヘッダー/フッターのサポート
• スクロール読み込み
• プルして更新
• 完全にクロスプラットフォーム

基本的なSectionListコンポーネントは次のようになります-

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

SectionListを操作するには、以下に示すようにコンポーネントをインポートします-

import { SectionList } from "react-native";

SectionListで利用できる重要なプロパティのリストは次のとおりです-

例1：SectionListを使用してデータを表示する

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の関数を実装するには

以下の関数は、アイテムを取得し、以下に示すようにテキストコンポーネントに同じものを表示します-

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

テキストコンポーネントはアイテムを表示し、ビューコンポーネント内にラップされます。

SectionListを実装するには

これは、データ、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>

this.state.data データに与えられます 小道具とthis.renderItem 関数はrenderItemに割り当てられています 小道具。

データに基づいて、データ配列から一意のキープロパティを指定できます。これは、小道具 keyExtractorにも同じように指定する必要があります。 。指定されていない場合は、配列インデックスがキーと見なされます。 値。

したがって、ここで一意のキーはitem + indexであり、同じものがkeyExtractorに割り当てられます。

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

SectionListでstickySectionHeadersEnabledプロップを有効にする

小道具stickySectionHeadersEnabledを使用すると、sectionListのヘッダーを上部に固定できます。ユーザーがスクロールすると、次のヘッダーが表示されて上部に到達すると、上部に固定され、すべてのヘッダーで同じように表示されます。

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"
   }
});

出力