Maison  >  Article  >  interface Web  >  Expliquez l'utilisation du composant VirtualizedList dans ReactNative ?

Expliquez l'utilisation du composant VirtualizedList dans ReactNative ?

王林
王林avant
2023-08-24 13:45:021566parcourir

Le composant

VirtualizedList est idéal lorsque votre liste est très grande. VirtualizedList permet d'améliorer les performances et l'utilisation de la mémoire. Au fur et à mesure que l'utilisateur fait défiler, les données sont affichées à l'utilisateur.

Les composants de base de VirtualizedList sont les suivants &minuns;

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

Propriétés importantes de VirtualizedList

Property Description
renderItem affichera les éléments dans les données Dans VirtualizedList.
data Données à afficher.
getItem Fonction pour obtenir un seul élément
getItemCount Obtenez le nombre d'éléments de données.
initialNumToRender Le nombre de rendus au début.
keyExtractor Chaque clé unique à considérer L'élément pour l'index spécifié.

Ceci est un exemple fonctionnel de VirtualizedList.

Exemple : Afficher les données à l'aide de VirtualizedList

Pour utiliser VirtualizedList, importez-la d'abord comme suit -

import { SafeAreaView, View, VirtualizedList, StyleSheet, Text } from &#39;react-native&#39;;

Le code de VirtualizedList est le suivant -

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

L'élément initial dont nous voulons afficher le rendu est 4. La propriété renderItem est utilisée pour afficher l'élément à l'écran. Il utilise un composant Item personnalisé défini comme indiqué ci-dessous -

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

keyExtractor pour définir une clé unique pour chaque élément.

keyExtractor={item => item.id}

props getItemCount Obtient le nombre total d'éléments qui seront affichés à l'utilisateur. Il appelle maintenant la fonction getItemCount, qui est définie comme suit. L'attribut

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

getITem est utilisé pour afficher les données. Il appelle la méthode getItem, qui est définie comme suit -

const getItem = (data, index) => {
   return {
      id: index,
      title: &#39;test&#39;
   }
}
getItem={getItem}

Le code complet pour afficher VirtualizedList est le suivant -

import React from 'react';
import { SafeAreaView, View, VirtualizedList, StyleSheet, Text } from &#39;react-native&#39;;
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

解释一下 ReactNative 中 VirtualizedList 组件的用法?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer