Maison > Article > interface Web > Expliquez l'utilisation du composant VirtualizedList dans ReactNative ?
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} />
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.
Pour utiliser VirtualizedList, importez-la d'abord comme suit -
import { SafeAreaView, View, VirtualizedList, StyleSheet, Text } from 'react-native';
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: 'test' } } getItem={getItem}
Le code complet pour afficher VirtualizedList est le suivant -
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 (); } const VirtualizedListExample = () => { return ( {title} ); } const styles = StyleSheet.create({ item: { backgroundColor: '#ccc', height: 100, justifyContent: 'center', marginVertical: 8, marginHorizontal: 16, padding: 20, }, title: { fontSize: 32, }, }); export default VirtualizedListExample; - } keyExtractor={item => item.id} getItemCount={getItemCount} getItem={getItem} />
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!