什么是 FlatList 组件以及如何在 React Native 中使用它?
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 });
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' } });