องค์ประกอบ SectionList คืออะไรและใช้งานอย่างไรใน React Native

อินเทอร์เฟซที่ช่วยแสดงรายการในส่วนต่างๆ คุณสมบัติที่สำคัญบางประการของ SectionList คือ −

• รองรับส่วนหัว/ส่วนท้ายของรายการ
• รองรับส่วนหัว/ส่วนท้ายของส่วน
• เลื่อนโหลด
• ดึงเพื่อรีเฟรช
• ข้ามแพลตฟอร์มอย่างสมบูรณ์

องค์ประกอบ SectionList พื้นฐานมีลักษณะดังนี้ -

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

ในการทำงานกับ SectionList ให้นำเข้าส่วนประกอบดังที่แสดงด้านล่าง -

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

ฟังก์ชันด้านล่างดูแลรายการและแสดงเหมือนกันในองค์ประกอบข้อความดังที่แสดงด้านล่าง -

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

คอมโพเนนต์ Text จะแสดงรายการและรวมอยู่ใน View Component

การใช้งาน SectionList

นี่คือการใช้งาน SectionList ที่มี data, renderItem, keyExtractor และ renderSectionHeader props

<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

การเปิดใช้งาน StickySectionHeadersEnabled props ใน SectionList

props stickySectionHeadersEnabled ช่วยให้คุณติดส่วนหัวของรายการส่วนของคุณที่ด้านบน เมื่อผู้ใช้เลื่อนหากส่วนหัวถัดไปปรากฏขึ้นและขึ้นไปถึงด้านบน ส่วนหัวนั้นจะติดอยู่ที่ด้านบนและจะยังคงเหมือนเดิมสำหรับส่วนหัวทั้งหมด

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

ผลลัพธ์