Giải thích cách sử dụng thành phần VirtualizedList trong ReactNative?

Thành phần VirtualizedList tốt nhất khi danh sách của bạn có kích thước lớn.

Thành phần cơ bản của VirtualizedList như sau &minuns;

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

Thuộc tính danh sách ảo hóa quan trọng

Đây là một ví dụ hoạt động của VirtualizedList.

Ví dụ:Hiển thị dữ liệu bằng VirtualizedList

Để làm việc với VirtualizedList, trước tiên hãy nhập nó như sau -

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

Mã cho VirtualizedList như sau -

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

Các mục ban đầu mà chúng ta muốn hiển thị để kết xuất là 4. Thuộc tính renderItem được sử dụng để hiển thị mục trên màn hình. Nó sử dụng thành phần Mục tùy chỉnh được xác định như hình dưới đây -

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

keyExtractor xác định khóa duy nhất cho từng mục.

keyExtractor={item => item.id}

Đạo cụ getItemCount nhận tổng số vật phẩm sẽ được hiển thị cho người dùng. Ngay bây giờ nó gọi hàm getItemCount được định nghĩa như sau.

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

Đạo cụ getITem dùng để hiển thị dữ liệu, nó gọi phương thức getItem và nó được định nghĩa như sau -

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

Mã hoàn chỉnh để hiển thị VirtualizedList như sau -

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;

Đầu ra