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

FlatList 是一個用於載入列表項的容器。它提供標題和頁尾支援、多列支援、垂直/水平滾動和延遲載入等功能。

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

  • 帶有滾動載入
  • 能夠使用 ScrolltoIndex 支援調整滾動
  • 帶有標題和頁尾支援
  • 多列支援
  • 跨平臺
  • 可配置的可視性回撥

FlatList 的基本結構如下：

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

FlatList 是從 VirtualizedList 元件實現的，它負責顯示適合移動螢幕當前視口的有限數量的專案。其餘資料會在使用者滾動時渲染。

要使用 FlatList，需要從 react-native 匯入它，如下所示：

import { FlatList} from "react-native";

FlatList 的一些重要屬性列在下面：

屬性描述
data一個包含要顯示資料的陣列。
renderItemrenderItem({ item, index, separators });

  • item - 它是從 data 欄位中以列表格式顯示的專案。
  • index - 每個專案都有一個索引。
  • separators - 是一個幫助渲染屬性的函式。可用的函式有：

separators.highlight(),
separators.unhighlight(),
separators.updateProps().
ListEmptyComponent列表為空時將呼叫的元件類、渲染函式或渲染元素。如果您想在列表為空時執行某些操作，此元件將很有用。
ListFooterComponent將在所有專案底部渲染的元件類、渲染函式或渲染元素。
ListFooterComponentStyle此處可以完成頁尾元件所需的樣式設定。
ListHeaderComponent將在所有專案頂部渲染的元件類、渲染函式或渲染元素。
ListHeaderComponentStyle此處可以完成標題元件所需的樣式設定。
horizontal如果此屬性設定為 true，則將水平渲染專案。
keyExtractor為給定索引提取唯一鍵。該鍵用於快取，也用於跟蹤專案重新排序。(item: object, index: number) => string;

示例 1：垂直顯示 FlatList 中的專案

此示例顯示了 FlatList 的工作原理。要使用 FlatList，首先匯入元件：

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

我需要 FlatList 以及其他元件，如 Text、View、StyleSheet 等。這些元件如上所示匯入。

匯入完成後，我需要在 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 函式

下面的函式負責獲取專案並在 Text 元件中顯示它，如下所示：

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

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** 屬性。

根據您的資料，您可以指定資料陣列中唯一的鍵屬性，並將其傳遞給 keyExtractor 屬性。如果未指定，它將使用陣列索引作為 **key** 值。

因此，我們將 name 作為唯一鍵，並將其分配給 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 (<View style={styles.item}><Text style={{ fontWeight: (item.isTitle) ? "bold" : "", color: (item.isTitle) ? "red" : "gray"}} >{item.name}</Text></View>);};
render() {
   return (<View style={styles.container}><FlatList data={this.state.data} renderItem=   {this.renderItem} keyExtractor={item => item.name} stickyHeaderIndices={this.state.stickyHeaderIndices} /></View>);
   }
}
const styles = StyleSheet.create({
   container: {
      flex: 1,
      marginTop: StatusBar.currentHeight || 0,
   },
   item: {
      margin: 10,
      padding: 20,
      marginVertical: 8,
      marginHorizontal: 16,
   }
});

輸出

示例 2：水平顯示 FlatList 中的專案

要水平顯示 FlatList 專案，只需將屬性 horizontal={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 (<View style={styles.item}><Text style={{ fontWeight: (item.isTitle) ? "bold" : "", color: (item.isTitle) ? "red" : "gray"}} >{item.name}</Text></View>);};
   render() {
      return (<View style={styles.container}><FlatList horizontal={true}    data={this.state.data} renderItem={this.renderItem} keyExtractor={item => item.name}    stickyHeaderIndices={this.state.stickyHeaderIndices} /></View>);
   }
}
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'
   }
});

輸出

更新於：2021年7月1日

瀏覽量 1K+

啟動您的職業生涯

透過完成課程獲得認證

開始
廣告
© . All rights reserved.