อธิบายการใช้ส่วนประกอบ VirtualizedList ใน ReactNative?

คอมโพเนนต์ VirtualizedList จะดีที่สุดเมื่อรายการของคุณมีขนาดใหญ่มาก VirtualizedList ช่วยในการประสิทธิภาพและการใช้หน่วยความจำที่ดีขึ้น ขณะที่ผู้ใช้เลื่อน ข้อมูลจะแสดงต่อผู้ใช้

องค์ประกอบพื้นฐานของ VirtualizedList มีดังต่อไปนี้ &minuns;

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

คุณสมบัติ VirtualizedList ที่สำคัญ

นี่คือตัวอย่างการทำงานของ VirtualizedList

ตัวอย่าง:การแสดงข้อมูลโดยใช้ VirtualizedList

ในการทำงานกับ VirtualizedList ให้นำเข้าก่อนดังนี้ −

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

รหัสสำหรับ VirtualizedList มีดังต่อไปนี้ -

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

รายการเริ่มต้นที่เราต้องการแสดงเพื่อแสดงผลคือ 4 คุณสมบัติ renderItem ใช้เพื่อแสดงรายการบนหน้าจอ มันใช้ประโยชน์จากองค์ประกอบรายการที่กำหนดเองที่กำหนดไว้ดังที่แสดงด้านล่าง -

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

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 (
      <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;

ผลลัพธ์