Erklären Sie die Verwendung der VirtualizedList-Komponente in ReactNative?-js-Tutorial-php.cn

Erklären Sie die Verwendung der VirtualizedList-Komponente in ReactNative?

王林

Freigeben： 2023-08-24 13:45:02

nach vorne

1540 Leute haben es durchsucht

Die VirtualizedList-Komponente eignet sich am besten, wenn Ihre Liste sehr groß ist. VirtualizedList trägt zur Verbesserung der Leistung und Speichernutzung bei. Während der Benutzer scrollt, werden ihm die Daten angezeigt.

Die Grundkomponenten von VirtualizedList sind wie folgt: &minuns;

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

Nach dem Login kopieren

Wichtige VirtualizedList-Eigenschaften

Property	Description
renderItem	gerendert die Elemente in den Daten Innerhalb von VirtualizedList.
Daten	Anzuzeigende Daten.
getItem	Funktion zum Abrufen eines einzelnen Artikels
getItemCount	Erhalten Sie die Anzahl der Datenelemente.
initialNumToRender< /td>	Die Anzahl der Renderings am Anfang.
keyExtractor	Jeder einzelne Schlüssel, den es zu berücksichtigen gilt Das Element für den angegebenen Index.

Dies ist ein funktionierendes Beispiel von VirtualizedList.

Beispiel: Daten mit VirtualizedList anzeigen

Um VirtualizedList zu verwenden, importieren Sie es zunächst wie folgt: -

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

Nach dem Login kopieren

Der Code für VirtualizedList lautet wie folgt: -

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

Nach dem Login kopieren

Das erste Element, das wir im Rendering anzeigen möchten, ist 4. Die renderItem-Eigenschaft wird verwendet, um das Element auf dem Bildschirm anzuzeigen. Es verwendet eine benutzerdefinierte Elementkomponente, die wie unten gezeigt definiert ist –

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

Nach dem Login kopieren

keyExtractor, um einen eindeutigen Schlüssel für jedes Element zu definieren.

keyExtractor={item => item.id}

Nach dem Login kopieren

props getItemCount Ruft die Gesamtzahl der Elemente ab, die dem Benutzer angezeigt werden. Nun ruft es die Funktion getItemCount auf, die wie folgt definiert ist. Das Attribut

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

Nach dem Login kopieren

getITem wird verwendet, um die anzuzeigenden Daten abzurufen. Es ruft die getItem-Methode auf, die wie folgt definiert ist: -

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

Nach dem Login kopieren

Der vollständige Code zum Anzeigen von VirtualizedList lautet wie folgt: -

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;

Nach dem Login kopieren

output

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

Das obige ist der detaillierte Inhalt vonErklären Sie die Verwendung der VirtualizedList-Komponente in ReactNative?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!