React Native में VirtualizedList कंपोनेंट के उपयोग की व्याख्या

VirtualizedList कंपोनेंट सबसे अच्छा है जब आपकी सूची आकार में बड़े पैमाने पर बड़ी है। VirtualizedList बेहतर प्रदर्शन और मेमोरी उपयोग में मदद करता है। जैसे-जैसे उपयोगकर्ता स्क्रॉल करता है, डेटा उपयोगकर्ता को दिखाया जाता है।

VirtualizedList का बेसिक कंपोनेंट इस प्रकार है:

<VirtualizedList data={DATA} initialNumToRender={4} renderItem={renderItem} keyExtractor={keyExtractor} getItemCount={getItemCount} getItem={getItem} />

महत्वपूर्ण VirtualizedList प्रॉपर्टीज

प्रॉप्स	विवरण
renderItem	डेटा से आइटम्स VirtualizedList के अंदर रेंडर किए जाएंगे।
data	प्रदर्शित किया जाने वाला डेटा।
getItem	फ़ंक्शन जो डेटा से व्यक्तिगत आइटम लाएगा।
getItemCount	डेटा आइटम्स की संख्या प्राप्त करता है।
initialNumToRender	शुरुआत में रेंडर होने की संख्या।
keyExtractor	निर्दिष्ट इंडेक्स के लिए प्रत्येक आइटम के लिए मानी जाने वाली यूनिक कुंजी।

यहां VirtualizedList का एक कार्यात्मक उदाहरण दिया गया है।

उदाहरण: VirtualizedList का उपयोग करके डेटा प्रदर्शित करना

VirtualizedList के साथ काम करने के लिए पहले इसे इम्पोर्ट करें जैसा कि नीचे दिखाया गया है:

import { SafeAreaView, View, VirtualizedList, StyleSheet, Text } from 'react-native';

VirtualizedList के लिए कोड इस प्रकार है:

<SafeAreaView>
     }
        keyExtractor={item => item.id}
        getItemCount={getItemCount}
        getItem={getItem}
    />
</SafeAreaView>

प्रारंभिक आइटम जिन्हें हम रेंडर करना चाहते हैं, वे 4 हैं। renderItem प्रॉपर्टी का उपयोग स्क्रीन पर आइटम प्रदर्शित करने के लिए किया जाता है। यह नीचे दिखाए अनुसार परिभाषित कस्टम Item कंपोनेंट का उपयोग करता है:

const Item = ({ title })=> {
    return (
        
            {title}
        
    );
}

keyExtractor प्रत्येक आइटम के लिए यूनिक कुंजी को परिभाषित करता है।

keyExtractor={item => item.id}

प्रॉप्स getItemCount उन आइटम्स की कुल संख्या प्राप्त करता है जो उपयोगकर्ता को प्रदर्शित किए जाएंगे। अभी यह फ़ंक्शन getItemCount को कॉल करता है जिसे निम्नानुसार परिभाषित किया गया है।

const getItemCount = (data) => {
    return 100;
}
getItemCount={getItemCount}

getItem प्रॉप्स प्रदर्शित किए जाने वाले डेटा को प्राप्त करने के लिए है। यह getItem मेथड को कॉल करता है और इसे निम्नानुसार परिभाषित किया गया है:

const getItem = (data, index) => {
    return {
        id: index,
        title: 'test'
    }
}
getItem={getItem}

VirtualizedList प्रदर्शित करने का पूरा कोड इस प्रकार है:

import React from 'react';
import { SafeAreaView, View, VirtualizedList, StyleSheet, Text } from 'react-native';
const DATA = [];
const getItem = (data, index) => {
    return {
        id: index,
        title: 'test'
    }
}
const getItemCount = (data) => {
    return 100;
}
const Item = ({ title })=> {
    return (
        
            {title}
        
    );
}
const VirtualizedListExample = () => {
    return (
        
             }
                keyExtractor={item => item.id}
                getItemCount={getItemCount}
                getItem={getItem}
            />
        
    );
}
const styles = StyleSheet.create({
    item: {
        backgroundColor: '#ccc',
        height: 100,
        justifyContent: 'center',
        marginVertical: 8,
        marginHorizontal: 16,
        padding: 20,
    },
    title: {
        fontSize: 32,
    },
});
export default VirtualizedListExample;

आउटपुट

React Native में VirtualizedList कंपोनेंट के उपयोग की व्याख्या