React Native-এ FlatList কম্পোনেন্ট কী এবং এর ব্যবহার

FlatList একটি কন্টেইনার যা লিস্ট আইটেম লোড করতে ব্যবহৃত হয়। এতে হেডার এবং ফুটার সাপোর্ট, মাল্টিপল কলাম সাপোর্ট, ভার্টিক্যাল/হরিজন্টাল স্ক্রোলিং, লেজি লোডিং ইত্যাদি থাকে।

FlatList-এর কিছু গুরুত্বপূর্ণ ফিচার:

• স্ক্রোল লোডিং সহ
• ScrolltoIndex সাপোর্ট দিয়ে স্ক্রোল অ্যাডজাস্ট করা যায়
• হেডার এবং ফুটার সাপোর্ট
• মাল্টিপল কলাম সাপোর্ট
• ক্রস প্ল্যাটফর্ম
• কনফিগারেবল ভিউয়াবিলিটি কলব্যাক

FlatList-এর বেসিক স্ট্রাকচার নিচের মতো:

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

FlatList VirtualizedList কম্পোনেন্ট থেকে ইম্প্লিমেন্ট করা হয়েছে যা কেয়েকটি আইটেম ডিসপ্লে করবে যা বর্তমান ভিউপোর্টে ফিট হবে। বাকি ডেটা ইউজার স্ক্রোল করলে রেন্ডার হবে। data এবং renderItem বেসিক প্রপস ব্যবহার করে FlatList তৈরি করা যায়।

FlatList-এ কাজ করতে হলে react-native-এ서 ইম্পোর্ট করতে হয়:

import { FlatList } from "react-native";

FlatList-এর কিছু গুরুত্বপূর্ণ প্রপস নিচে দেওয়া হলো:

উদাহরণ ১: FlatList-এ ভার্টিক্যালি আইটেম ডিসপ্লে

এই উদাহরণটি 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 কম্পোনেন্টের ভেতরে র‍্যাপ করা হয়েছে। item.isTitle ভ্যারিয়েবল চেক করা হয় true/false, এবং অনুযায়ী বোল্ড এবং কালার দেওয়া হয়।

FlatList ইম্প্লিমেন্টেশন

এখানে data এবং renderItem প্রপস সহ FlatList ইম্প্লিমেন্টেশন:

     item.name} />

this.state.data data প্রপসে দেওয়া হয়েছে এবং this.renderItem ফাংশন renderItem প্রপসে অ্যাসাইন করা হয়েছে।

আপনার ডেটা অনুযায়ী আপনি কী প্রপার্টি বলতে পারেন যা ডেটা অ্যারে থেকে ইউনিক হবে এবং সেটি keyExtractor প্রপসে দিতে হবে। না দিলে অ্যারে ইনডেক্সকে key ভ্যালু হিসেবে ধরা হবে। এখানে name-কে ইউনিক কী হিসেবে বিবেচনা করা হয়েছে এবং keyExtractor-এ অ্যাসাইন করা হয়েছে।

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

আউটপুট

উদাহরণ ২: FlatList-এ হরিজন্টালি আইটেম ডিসপ্লে

FlatList আইটেম হরিজন্টালি দেখাতে হলে শুধু 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'
    }
});

আউটপুট