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 के कुछ महत्वपूर्ण प्रॉप्स नीचे सूचीबद्ध हैं:

separators.highlight(), separators.unhighlight(), separators.updateProps().

उदाहरण 1: 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 मान के रूप में मान लेगा।

तो हमने नाम को यूनिक Key माना है और वही 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,
    }
});

आउटपुट

उदाहरण 2: FlatList में आइटम्स को हॉरिजॉन्टली प्रदर्शित करना

FlatList आइटम्स को हॉरिजॉन्टली प्रदर्शित करने के लिए आपको बस अपने FlatList कंपोनेंट में horizontal={true} प्रॉप्स जोड़ना होगा।

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

आउटपुट