ReactNative এ VirtualizedList উপাদানের ব্যবহার ব্যাখ্যা করুন?

ভার্চুয়ালাইজডলিস্ট উপাদানটি সবচেয়ে ভালো হয় যখন আপনার তালিকাটি আকারে বড় হয়৷ভার্চুয়ালাইজডলিস্ট আরও ভাল কার্যক্ষমতা এবং মেমরি ব্যবহারে সহায়তা করে৷ ব্যবহারকারী স্ক্রোল করার সাথে সাথে ব্যবহারকারীকে ডেটা দেখানো হয়৷

ভার্চুয়ালাইজডলিস্টের মৌলিক উপাদান নিম্নরূপ &minuns;

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

গুরুত্বপূর্ণ ভার্চুয়ালাইজড তালিকা বৈশিষ্ট্য

এখানে ভার্চুয়ালাইজডলিস্টের একটি কার্যকরী উদাহরণ।

উদাহরণ:ভার্চুয়ালাইজডলিস্ট ব্যবহার করে ডেটা প্রদর্শন

ভার্চুয়ালাইজডলিস্টের সাথে কাজ করতে প্রথমে এটি নিম্নরূপ −

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

ভার্চুয়ালাইজডলিস্টের কোডটি নিম্নরূপ -

<SafeAreaView>
   <VirtualizedList
      data={DATA}
      initialNumToRender={4}
      renderItem={({ item }) => <Item title={item.title} />}
      keyExtractor={item => item.id}
      getItemCount={getItemCount}
      getItem={getItem}
   />
</SafeAreaView>

রেন্ডার করার জন্য আমরা যে প্রাথমিক আইটেমগুলি প্রদর্শন করতে চাই তা হল 4. রেন্ডার আইটেম বৈশিষ্ট্যটি স্ক্রিনে আইটেমটি প্রদর্শন করতে ব্যবহৃত হয়। এটি নীচে দেখানো হিসাবে সংজ্ঞায়িত কাস্টম আইটেম উপাদান ব্যবহার করে −

const Item = ({ title })=> {
   return (
      <View style={styles.item}>
      <Text style={styles.title}>{title}</Text>
      </View>
   );
}

কী এক্সট্র্যাক্টর প্রতিটি আইটেমের জন্য অনন্য কী সংজ্ঞায়িত করে৷

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}

ভার্চুয়ালাইজডলিস্ট প্রদর্শনের সম্পূর্ণ কোডটি নিম্নরূপ -

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 (
      <View style={styles.item}>
         <Text style={styles.title}>{title}</Text>
         </View>
      );
   }
   const VirtualizedListExample = () => {
      return (
         <SafeAreaView>
            <VirtualizedList
               data={DATA}
               initialNumToRender={4}
               renderItem={({ item }) => <Item title={item.title} />}
               keyExtractor={item => item.id}
               getItemCount={getItemCount}
               getItem={getItem}
         />
         </SafeAreaView>
      );
   }
   const styles = StyleSheet.create({
   item: {
      backgroundColor: '#ccc',
      height: 100,
      justifyContent: 'center',
      marginVertical: 8,
      marginHorizontal: 16,
      padding: 20,
   },
   title: {
      fontSize: 32,
   },
});
export default VirtualizedListExample;

আউটপুট