Was ist die FlatList-Komponente und wie wird sie in React Native verwendet?

FlatList ist ein Container, der zum Laden von Listenelementen verwendet werden kann. Es bietet Unterstützung für Kopf- und Fußzeilen, Unterstützung für mehrere Spalten, vertikales/horizontales Scrollen, Lazy Loading und mehr.

Hier sind einige wichtige Funktionen von FlatList:

Unterstützt das Scrollen.
• Möglichkeit, das Scrollen mithilfe der ScrolltoIndex-Unterstützung anzupassen.
• Unterstützt Kopf- und Fußzeilen.
• Unterstützung mehrerer Spalten.
Plattformübergreifend Grundstruktur von
• FlatList lautet wie folgt:

<FlatList
data={DataContainer} renderItem={ yourenderItem} keyExtractor={item => item.id} />

FlatList wird über die VirtualizedList-Komponente implementiert, die für die Anzeige einer begrenzten Anzahl von Elementen verantwortlich ist, die in den aktuellen Ansichtsbereich des mobilen Bildschirms passen. Die restlichen Daten werden gerendert, während der Benutzer scrollt. Zum Erstellen einer FlatList können grundlegende Eigenschaften wie data und renderItem verwendet werden.

Um FlatList zu verwenden, müssen Sie es wie unten gezeigt aus React-Native importieren

Array mit den anzuzeigenden Daten.

renderItemitem – Es handelt sich um ein Element in einem Datenfeld, das im Listenformat angezeigt wird.

import { FlatList} from "react-native";

ListEmptyComponenthorizontalkeyExtractorBeispiel 1: Elemente in FlatList vertikal anzeigenIch benötige FlatList zusammen mit anderen Komponenten wie Text, Ansichten, Stylesheets usw. Sie werden wie oben gezeigt importiert. Nachdem der Import abgeschlossen ist, muss ich die Daten in FlatList anzeigen. Die Daten werden in this.state.data gespeichert, wie unten gezeigt –

import { FlatList , Text, View, StyleSheet } from "react-native";

Funktion, die renderItem implementiert Die Textkomponente wird in die Ansichtskomponente eingebunden. item.isTitle ist eine Variable. Überprüfen Sie, ob sie wahr/falsch ist, setzen Sie sie entsprechend auf Fettdruck und weisen Sie ihr eine Farbe zu. Hier ist die FlatList-Implementierung mit Daten- und renderItem-Eigenschaften.

renderItem = ({ item }) => {
   return (
      <View style={styles.item}>
         <Text style={{ fontWeight: (item.isTitle) ? "bold" : "", color: (item.isTitle) ? "red" : "gray"}} >{item.name}</Text>
      </View>
   );
};

renderItem({ item, index, seperators });
Index – Jedes Element hat einen Index. Trennzeichen – ist eine Funktion, die beim Rendern von Requisiten hilft. Verfügbare Funktionen sind:
	Eine Komponentenklasse, eine Renderfunktion oder ein Renderelement, das aufgerufen wird, wenn die Liste leer ist. Diese Komponente kann hilfreich sein, wenn Sie eine Aktion ausführen möchten, während die Liste leer ist. ListFooterComponent Die Komponentenklasse, Renderfunktion oder das Renderelement, das am Ende aller Elemente gerendert wird.
ListFooterComponentStyle	Das erforderliche Styling für die Fußzeilenkomponente kann hier vorgenommen werden.
ListHeaderComponent	Komponentenklasse, Renderfunktion oder Renderelement, das über allen Elementen gerendert wird.
ListHeaderComponentStyle	Das erforderliche Styling für die Header-Komponente kann hier vorgenommen werden.
Wenn diese Eigenschaft auf „true“ gesetzt ist, wird das Element horizontal dargestellt.
Extrahiert eindeutige Schlüssel für einen bestimmten Index. Dieser Schlüssel wird zum Zwischenspeichern und auch zum Verfolgen der Nachbestellung von Artikeln verwendet. (item: object, index: number) => string;
Dieses Beispiel zeigt, wie FlatList funktioniert. Um FlatList zu verwenden, importieren Sie zunächst die Komponenten - strong> separators.highlight(), separators.unhighlight(), separators.updateProps().
Die folgende Funktion ist dafür verantwortlich, das Element abzurufen und dasselbe in der Textkomponente anzuzeigen, wie unten gezeigt – this.state = { data: [ { name: "Javascript Frameworks", isTitle: true }, { name: "Angular", isTitle: false }, { name: "ReactJS", isTitle: false }, { name: "VueJS", isTitle: false }, { name: "ReactNative", isTitle: false }, { name: "PHP Frameworks", isTitle: true }, { name: "Laravel", isTitle: false }, { name: "CodeIgniter", isTitle: false }, { name: "CakePHP", isTitle: false }, { name: "Symfony", isTitle: false } ], stickyHeaderIndices: [] };	Um FlatList zu implementieren

this.state.data

wird der Eigenschaft

data

zugewiesen und die Funktion

>this.renderItem

wird der Eigenschaft

renderItem

zugewiesen.

Anhand Ihrer Daten können Sie der Schlüsseleigenschaft mitteilen, welche die einzige im Datenarray sein wird und den gleichen Wert für props keyExtractor bereitstellen soll. Wenn nicht angegeben, wird der Array-Index als

key-Wert behandelt. Also behandeln wir den Namen als einen eindeutigen Schlüssel und weisen ihn dem keyExtractor zu.

<View style={styles.container}>
   <FlatList data={this.state.data} renderItem={this.renderItem} keyExtractor={item => item.name} />
</View>

Dies ist der vollständige Code zum Implementieren von FlatList.

keyExtractor={item => item.name}

Ausgabe Beispiel 2: Elemente in FlatList horizontal anzeigenUm FlatList-Elemente horizontal anzuzeigen, fügen Sie einfach props Horizontal={true} zu Ihrer FlatList-Komponente hinzu.

import React from "react";
import { FlatList , Text, View, StyleSheet, StatusBar } from "react-native";
export default class App extends React.Component {
   constructor() {
      super();
      this.state = {
         data: [
            { name: "Javascript Frameworks", isTitle: true },
            { name: "Angular", isTitle: false },
            { name: "ReactJS", isTitle: false },
            { name: "VueJS", isTitle: false },
            { name: "ReactNative", isTitle: false },
            { name: "PHP Frameworks", isTitle: true },
            { name: "Laravel", isTitle: false },
            { name: "CodeIgniter", isTitle: false },
            { name: "CakePHP", isTitle: false },
            { name: "Symfony", isTitle: false }
         ],
         stickyHeaderIndices: []
      };
   }
   renderItem = ({ item }) => {return ({item.name});};
render() {
   return ();
   }
}
const styles = StyleSheet.create({
   container: {
      flex: 1,
      marginTop: StatusBar.currentHeight || 0,
   },
   item: {
      margin: 10,
      padding: 20,
      marginVertical: 8,
      marginHorizontal: 16,
   }
});

Ausgabe

Das obige ist der detaillierte Inhalt vonWas ist die FlatList-Komponente und wie wird sie in React Native verwendet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!