Qu'est-ce que le composant FlatList et comment l'utiliser dans React Native ?-js tutoriel-php.cn

Qu'est-ce que le composant FlatList et comment l'utiliser dans React Native ?

PHPz

Libérer： 2023-09-04 13:25:01

avant

1537 Les gens l'ont consulté

FlatList est un conteneur qui peut être utilisé pour charger des éléments de liste. Il offre la prise en charge des en-têtes et des pieds de page, la prise en charge de plusieurs colonnes, le défilement vertical/horizontal, le chargement paresseux, etc.

Voici quelques fonctionnalités importantes de FlatList -

Possibilité d'ajuster le défilement à l'aide de la prise en charge de ScrolltoIndex
Prend en charge l'en-tête et le pied de page
Prise en charge de plusieurs colonnes
Rappels configurables

FlatList est la suivante -

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

Copier après la connexion

FlatList est implémenté via le composant VirtualizedList, qui est responsable de l'affichage d'un nombre limité d'éléments qui correspondent au port d'affichage actuel de l'écran du mobile. Les données restantes sont restituées au fur et à mesure que l'utilisateur fait défiler. Les propriétés de base telles que data et renderItem peuvent être utilisées pour créer une FlatList.

Pour utiliser FlatList, vous devez l'importer depuis React-Native comme indiqué ci-dessous -

import { FlatList} from "react-native";

Copier après la connexion

Vous trouverez ci-dessous quelques propriétés importantes de FlatList -

< /tr>

Props< /th>	Description
Data	Tableau contenant les données à afficher.
renderItem	renderItem({ item, index, seperators }); item - Il s'agit d'un élément dans un champ de données affiché sous forme de liste. index - Chaque élément a un index. separators - est une fonction qui aide au rendu des accessoires. Les fonctions disponibles sont - separators.highlight(), separators.unhighlight(), separators.updateProps(). Copier après la connexion
ListEmptyComponent	Une classe de composant, une fonction de rendu ou un élément de rendu qui sera appelé lorsque la liste est vide. Ce composant peut être utile si vous souhaitez effectuer une action lorsque la liste est vide.
ListFooterComponent	La classe de composant, la fonction de rendu ou l'élément de rendu qui sera rendu au bas de tous les éléments.
ListFooterComponentStyle	Le style requis pour le composant de pied de page peut être effectué ici.
ListHeaderComponent< /strong>	Classe de composant, fonction de rendu ou élément de rendu qui sera rendu au-dessus de tous les éléments.
ListHeaderComponentStyle	Le style requis pour le composant d'en-tête peut être effectué ici.
horizontal	Si elle est définie sur true, cette propriété rendra l'élément horizontalement.
keyExtractor	Extrait les clés uniques pour un index donné. Cette clé est utilisée pour la mise en cache et également pour suivre la réorganisation des éléments. (item : object, index : number) => string;

Exemple 1 : Afficher les éléments dans FlatList verticalement

Cet exemple montre comment fonctionne FlatList. Pour utiliser FlatList, importez d'abord les composants -

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

Copier après la connexion

J'ai besoin de FlatList avec d'autres composants comme le texte, les vues, les feuilles de style, etc. Ils sont importés comme indiqué ci-dessus.

Une fois l'importation terminée, je dois afficher les données dans FlatList. Les données sont stockées dans this.state.data comme indiqué ci-dessous -

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: []
};

Copier après la connexion

Fonction qui implémente renderItem

La fonction suivante est chargée d'obtenir l'élément et de l'afficher dans le composant texte comme indiqué ci-dessous -

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

Copier après la connexion

Le composant texte est enveloppé à l’intérieur du composant de vue. item.isTitle est une variable, vérifiez son vrai/faux et mettez-la en gras en conséquence et attribuez-lui une couleur.

Pour implémenter FlatList

Voici l'implémentation FlatList avec les propriétés data et renderItem.

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

Copier après la connexion

this.state.data se voit attribuer la propriété data et la fonction >this.renderItem est affectée à la propriété renderItem.

En fonction de vos données, vous pouvez indiquer la propriété clé qui sera la seule dans le tableau de données et qui devrait fournir la même valeur aux accessoires keyExtractor. S'il n'est pas fourni, il traitera l'index du tableau comme la valeur key. < /p>

Nous traitons donc le nom comme une clé unique et l'attribuons au keyExtractor.

keyExtractor={item => item.name}

Copier après la connexion

Ceci est le code complet pour implémenter FlatList.

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

Copier après la connexion

Sortie

什么是 FlatList 组件以及如何在 React Native 中使用它？

Exemple 2 : Afficher les éléments dans FlatList horizontalement

Pour afficher les éléments FlatList horizontalement, vous ajoutez simplement des accessoires Horizontal={true} à votre composant FlatList.

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: 100,
   },
   item: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
      padding: 30,
      margin: 2,
      borderColor: '#2a4944',
      borderWidth: 1,
      height:100,
      backgroundColor: '#d2f7f1'
   }
});

Copier après la connexion