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

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} />

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 'react-native';

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>

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>
   );
}

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

keyExtractor={item => item.id}

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}

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: 'test'
   }
}
getItem={getItem}

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

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}
         />
         </item></virtualizedlist></safeareaview>
      );
   }
   const styles = StyleSheet.create({
   item: {
      backgroundColor: '#ccc',
      height: 100,
      justifyContent: 'center',
      marginVertical: 8,
      marginHorizontal: 16,
      padding: 20,
   },
   title: {
      fontSize: 32,
   },
});
export default VirtualizedListExample;

output

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!