首頁 >web前端 >js教程 >什麼是 FlatList 元件以及如何在 React Native 中使用它?

什麼是 FlatList 元件以及如何在 React Native 中使用它?

PHPz
PHPz轉載
2023-09-04 13:25:011557瀏覽

FlatList 是一個可用來載入清單項目的容器。它提供頁首和頁腳支援、多列支援、垂直/水平滾動、延遲加載等。

以下是FlatList 的一些重要功能-

    支援滾動載入
  • 能夠使用ScrolltoIndex 支援來調整捲動
  • 支援頁首和頁腳
  • 多列支援
  • 跨平台
  • 可設定的可見度回呼

FlatList的基本結構如下-

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

FlatList 是透過VirtualizedList 元件實現的,該元件負責顯示適合行動螢幕目前視圖連接埠的有限數量的項目。其餘數據在用戶滾動時呈現。 data 和 renderItem 等基本屬性可用於建立 FlatList。

要使用FlatList,您需要從React-Native 匯入它,如下所示-

import { FlatList} from "react-native";

下面列出了FlatList 的一些重要屬性-

Props 描述
#資料 包含要顯示的資料的數組。
renderItem renderItem({ item, index, seperators });

  • item - 它是以清單格式顯示的資料欄位中的項目。
  • index - 每個項目都有一個索引。
  • separators - 是一個有助於渲染道具的函數。可用的函數有-

separators.highlight(),
separators.unhighlight(),
separators.updateProps().

#ListEmptyComponent 當清單為空時將被呼叫的元件類別、渲染函數或渲染元素。如果您想在清單為空時執行某些操作,此元件將會很有幫助。

ListFooterComponent 將在所有項目底部渲染的元件類別、渲染函數或渲染元素。

ListFooterComponentStyle 頁腳元件所需的樣式可以在此處完成。

ListHeaderComponent 元件類別、渲染函數或渲染元素,將在所有項目的頂部渲染。

ListHeaderComponentStyle 標題元件所需的樣式可以在此完成。
水平 strong> 如果設定為 true,此屬性將水平渲染項目。
keyExtractor 提取給定索引的唯一鍵。該鍵用於緩存,也用於追蹤項目重新排序。 (item: object, index: number) => string;

#範例1:垂直顯示FlatList 中的項目

#該範例顯示了FlatList 的工作原理。要使用 FlatList,首先匯入元件 -

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

我需要 FlatList 以及其他元件,如文字、檢視、樣式表等。它們的導入方式如上所示。

匯入完成後,我需要在 FlatList 中顯示資料。資料儲存在this.state.data 中,如下所示-

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 的函數

下面的函數負責取得項目並在文字元件中顯示相同的項目,如下所示-

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

文字元件包裝在檢視元件內。 item.isTitle 是一個變量,檢查它的 true/false,並相應地將其設為粗體,並為其指定顏色。

要實作 FlatList

這裡是具有 data 和 renderItem 屬性的 FlatList 實作。

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

this.state.data 被賦予data 屬性和 >this. renderItem 函數指派給renderItem 屬性。

根據您的數據,您可以判斷關鍵屬性這將是資料數組中唯一的一個,並且應該為 props keyExtractor 提供相同的值。如果沒有給出,它將把數組索引視為key#值。

因此我們將名稱視為唯一的Key,並將其指派給keyExtractor。

keyExtractor={item => item.name}

這是實作 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,
   }
});

輸出

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

範例2:水平顯示FlatList 中的項目

要水平顯示FlatList 項目,您只需將props Horiz ntal={true} 加入您的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'
   }
});

輸出

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

#

以上是什麼是 FlatList 元件以及如何在 React Native 中使用它?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:tutorialspoint.com。如有侵權,請聯絡admin@php.cn刪除