Explain the usage of VirtualizedList component in ReactNative?

The VirtualizedList component is best when your list is very large. VirtualizedList helps improve performance and memory usage. As the user scrolls, the data is displayed to the user.

The basic components of VirtualizedList are as follows&minuns;

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

Important VirtualizedList properties

Properties	Description
renderItem	will render the item in the data Within VirtualizedList.
data	The data to be displayed.
getItem	Function to get a single item
getItemCount	Get the number of data items.
initialNumToRender	The number of times to render at the beginning.
keyExtractor	Each unique key to be considered The item for the specified index.

This is a working example of VirtualizedList.

Example: Using VirtualizedList to display data

To use VirtualizedList, first import it as follows-

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

The code for VirtualizedList is as follows-

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

us The initial item to display rendering is 4. The renderItem property is used to display the item on the screen. It uses a custom Item component defined as follows -

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

keyExtractor to define a unique key for each item.

keyExtractor={item => item.id}

props getItemCount Gets the total number of items that will be displayed to the user. Now it calls the function getItemCount, which is defined as follows.

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

getITem attribute is used to get the data to be displayed. It calls the getItem method, which is defined as follows -

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

The complete code to display VirtualizedList is as follows -

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;

Output

The above is the detailed content of Explain the usage of VirtualizedList component in ReactNative?. For more information, please follow other related articles on the PHP Chinese website!