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

react nativejavascriptmobile development更新于 2025/7/25 16:44:17

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 的一些重要属性如下 −

属性	描述
data	包含要显示的数据的数组。
renderItem	renderItem({ item, index, Separators }); item − 它是来自数据字段的、以列表格式显示的项目。 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 变量的真假，并相应地将其设为粗体，同时为其指定颜色。

实现 FlatList

以下是具有数据和 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 属性。

根据您的数据，您可以确定数据数组中唯一的 key 属性，并将其分配给属性 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 (<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 项目，您只需将 props 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'
   }
});