flatlist 是一个可用于加载列表项的容器。它提供页眉和页脚支持、多列支持、垂直/水平滚动、延迟加载等。
以下是 flatlist 的一些重要功能 -
支持滚动加载能够使用 scrolltoindex 支持来调整滚动支持页眉和页脚多列支持跨平台可配置的可见度回调flatlist的基本结构如下 -
<flatlistdata={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 标题组件所需的样式可以在此处完成。
水平 如果设置为 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 (<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' }});
输出
以上就是什么是 flatlist 组件以及如何在 react native 中使用它？的详细内容。