FlatList Component ใน React Native คืออะไร และวิธีใช้งาน

FlatList เป็นคอนเทนเนอร์ที่ใช้โหลดรายการรายการ (list items) รองรับ header และ footer, รองรับหลายคอลัมน์, มีการเลื่อนแนวตั้ง/แนวนอน, lazy loading ฯลฯ

คุณสมบัติสำคัญของ FlatList:

• รองรับการโหลดขณะเลื่อน (scroll loading)
• ปรับการเลื่อนได้ด้วยการรองรับ ScrolltoIndex
• รองรับ header และ footer
• รองรับหลายคอลัมน์ (multiple column)
• Cross platform (รองรับหลายแพลตฟอร์ม)
• Configurable viewability callbacks

โครงสร้างพื้นฐานของ FlatList:

<FlatList data={DataContainer} renderItem={yourRenderItem} keyExtractor={item => item.id} />

FlatList ถูกนำมาจากคอมโพเนนท์ VirtualizedList ซึ่งดูแลการแสดงรายการจำกัดจำนวนที่พอดีกับ viewport ปัจจุบันของหน้าจอมือถือ ข้อมูลส่วนที่เหลือจะถูกเรนเดอร์เมื่อผู้ใช้เลื่อน พร็อพพื้นฐานเช่น data และ renderItem ใช้สร้าง FlatList ได้

เพื่อใช้งาน FlatList ต้องนำเข้าจาก react-native ดังนี้:

import { FlatList } from "react-native";

พร็อพเพอร์ตีสำคัญของ FlatList:

ตัวอย่าง 1: แสดงรายการใน FlatList แนวตั้ง

ตัวอย่างแสดงการทำงานของ FlatList เริ่มจากนำเข้าคอมโพเนนท์:

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

ต้องการ FlatList และคอมโพเนนท์อื่นๆ เช่น Text, View, StyleSheet นำเข้าเหมือนด้านบน

หลังนำเข้าแล้ว ต้องการข้อมูลที่จะแสดงใน FlatList เก็บไว้ใน this.state.data ดังนี้:

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

การสร้างฟังก์ชัน renderItem

ฟังก์ชันด้านล่างจัดการการนำรายการมาแสดงในคอมโพเนนท์ Text:

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

คอมโพเนนท์ Text ถูกล็อคไว้ใน View Component ตัวแปร item.isTitle ถูกตรวจสอบ true/false และจัดรูปแบบ bold และสีตามนั้น

การใช้งาน FlatList

การนำ FlatList ไปใช้ที่มี props data และ renderItem:

     item.name} />

this.state.data ส่งให้ props data และฟังก์ชัน this.renderItem ส่งให้ props renderItem

ตามข้อมูลของคุณ สามารถระบุพร็อพเพอร์ตี key ที่เป็นเอกลักษณ์จากอาร์เรย์ data และส่งให้ props keyExtractor หากไม่ระบุจะใช้ดัชนีอาร์เรย์เป็นค่า key ในที่นี้ใช้ name เป็น key เอกลักษณ์

keyExtractor={item => item.name}

โค้ดเต็มที่นำ FlatList ไปใช้:

import React from "react";
import { FlatList, Text, View, StyleSheet, StatusBar } from "react-native";
export default class App extends React.Component {
    constructor() {
        super();
        this.state = {
            data: [
                { name: "Javascript Frameworks", isTitle: true },
                { name: "Angular", isTitle: false },
                { name: "ReactJS", isTitle: false },
                { name: "VueJS", isTitle: false },
                { name: "ReactNative", isTitle: false },
                { name: "PHP Frameworks", isTitle: true },
                { name: "Laravel", isTitle: false },
                { name: "CodeIgniter", isTitle: false },
                { name: "CakePHP", isTitle: false },
                { name: "Symfony", isTitle: false }
            ],
            stickyHeaderIndices: []
        };
    }
    renderItem = ({ item }) => {return ({item.name});};
    render() {
        return ( item.name} stickyHeaderIndices={this.state.stickyHeaderIndices} />);
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop: StatusBar.currentHeight || 0,
    },
    item: {
        margin: 10,
        padding: 20,
        marginVertical: 8,
        marginHorizontal: 16,
    }
});

ผลลัพธ์

ตัวอย่าง 2: แสดงรายการใน FlatList แนวนอน

เพื่อแสดง FlatList แนวนอน เพียงเพิ่ม props horizontal={true} ให้กับคอมโพเนนท์ FlatList:

import React from "react";
import { FlatList, Text, View, StyleSheet, StatusBar } from "react-native";
export default class App extends React.Component {
    constructor() {
        super();
        this.state = {
            data: [
                { name: "Javascript Frameworks", isTitle: true },
                { name: "Angular", isTitle: false },
                { name: "ReactJS", isTitle: false },
                { name: "VueJS", isTitle: false },
                { name: "ReactNative", isTitle: false },
                { name: "PHP Frameworks", isTitle: true },
                { name: "Laravel", isTitle: false },
                { name: "CodeIgniter", isTitle: false },
                { name: "CakePHP", isTitle: false },
                { name: "Symfony", isTitle: false }
            ],
            stickyHeaderIndices: []
        };
    }
    renderItem = ({ item }) => {return ({item.name});};
    render() {
        return ( item.name} stickyHeaderIndices={this.state.stickyHeaderIndices} />);
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop: 100,
    },
    item: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        padding: 30,
        margin: 2,
        borderColor: '#2a4944',
        borderWidth: 1,
        height:100,
        backgroundColor: '#d2f7f1'
    }
});

ผลลัพธ์