คอมโพเนนต์ SectionList ใน React Native และวิธีใช้งาน

SectionList เป็นอินเตอร์เฟซสำหรับแสดงรายการแบบมีส่วน (sectioned list) คุณสมบัติสำคัญ:

รองรับ Header/Footer ของรายการ
รองรับ Header/Footer ของแต่ละ section
Scroll Loading (โหลดข้อมูลขณะเลื่อน)
Pull to refresh (ดึงเพื่อรีเฟรช)
Cross-platform เต็มรูปแบบ

คอมโพเนนต์พื้นฐาน

<SectionList
  sections={DataContainer}
  keyExtractor={yourKeyExtractor}
  renderItem={yourRenderItem}
  renderSectionHeader={yourSectionHeader}
/>

การนำเข้า

import { SectionList } from "react-native";

คุณสมบัติสำคัญ

Props	คำอธิบาย
renderItem	ฟังก์ชันแสดงรายการใน section คืนค่า React element รับ object ที่มี keys: item, index, section, separators
sections	ข้อมูลที่จะแสดง (array ของ sections)
renderSectionHeader	แสดงเนื้อหาที่ด้านบนของ section (บน iOS จะติดอยู่ที่ด้านบนขณะเลื่อน)
renderSectionFooter	แสดงเนื้อหาที่ด้านล่างของ section
refreshing	ตั้งค่า true เมื่อโหลดข้อมูลใหม่ขณะ pull-to-refresh
ListEmptyComponent	คอมโพเนนต์ที่แสดงเมื่อรายการว่าง
ListFooterComponent	คอมโพเนนต์แสดงท้ายรายการทั้งหมด
ListHeaderComponent	คอมโพเนนต์แสดงหัวรายการทั้งหมด
keyExtractor	ดึง unique key สำหรับแต่ละ index ใช้สำหรับ caching และ tracking การเรียงลำดับ

ตัวอย่างที่ 1: ใช้ SectionList แสดงข้อมูล

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

ข้อมูลตัวอย่าง

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

ฟังก์ชัน renderItem

renderItem = ({ item }) => {
  return (
    
      {item}
    
  );
};

การใช้งาน SectionList

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

โค้ดเต็มรูปแบบ:

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 (
      
        {item}
      
    );
  };

  render() {
    return (
      
         index}
          renderSectionHeader={({ section: { title } }) => (
            {title}
          )}
        />
      
    );
  }
}

const styles = StyleSheet.create({
  container: { flex: 1, marginTop: 20, marginHorizontal: 16 },
  item: { backgroundColor: "#ccc2ff", padding: 20, marginVertical: 8 },
  header: { fontSize: 32, backgroundColor: "#fff" }
});

ผลลัพธ์

คอมโพเนนต์ SectionList ใน React Native และวิธีใช้งาน

ตัวอย่างที่ 2: ใช้ stickySectionHeadersEnabled

Prop stickySectionHeadersEnabled ทำให้ header ของแต่ละ section ติดอยู่ที่ด้านบนขณะเลื่อน

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 (
      
        {item}
      
    );
  };

  render() {
    return (
      
         index}
          renderSectionHeader={({ section: { title } }) => (
            {title}
          )}
        />
      
    );
  }
}

const styles = StyleSheet.create({
  container: { flex: 1, marginTop: 20, marginHorizontal: 16 },
  item: { backgroundColor: "#ccc2ff", padding: 20, marginVertical: 8 },
  header: { fontSize: 32, backgroundColor: "#fff" }
});

ผลลัพธ์

คอมโพเนนต์ SectionList ใน React Native และวิธีใช้งาน