📅  最后修改于: 2023-12-03 15:19:44.952000             🧑  作者: Mango
React 原生 FlatList 组件是一个高性能的列表组件,适用于长列表的渲染。它采用了优化的渲染方式,只会在用户可见的区域渲染列表项,从而避免了渲染大列表时的性能问题。
使用 npm 安装:
npm install react-native --save
import { FlatList } from 'react-native';
data
:数组类型,列表的数据源。renderItem
:函数类型,用于渲染列表项的函数,该函数会接收一个参数 item
,即列表项的数据。例如:renderItem={({ item }) => (
<Text>{item.title}</Text>
)}
refreshing
:布尔类型,表示是否显示下拉刷新动画。onRefresh
:函数类型,下拉刷新时的回调函数。onEndReached
:函数类型,滚动到列表底部时的回调函数。keyExtractor
:函数类型,用于为列表项生成唯一的 key 值。以下是一个使用 FlatList 组件的示例代码:
import React, { Component } from 'react';
import { View, Text, FlatList } from 'react-native';
export default class MyComponent extends Component {
constructor(props) {
super(props);
this.state = {
data: [
{ key: '1', title: 'Item 1' },
{ key: '2', title: 'Item 2' },
{ key: '3', title: 'Item 3' },
{ key: '4', title: 'Item 4' },
{ key: '5', title: 'Item 5' },
{ key: '6', title: 'Item 6' },
{ key: '7', title: 'Item 7' },
{ key: '8', title: 'Item 8' },
{ key: '9', title: 'Item 9' },
{ key: '10', title: 'Item 10' },
],
refreshing: false,
};
}
render() {
return (
<FlatList
data={this.state.data}
renderItem={({ item }) => (
<View>
<Text>{item.title}</Text>
</View>
)}
keyExtractor={(item) => item.key}
refreshing={this.state.refreshing}
onRefresh={() => {
this.setState({ refreshing: true });
// TODO: 下拉刷新数据
this.setState({ refreshing: false });
}}
onEndReached={() => {
// TODO: 加载更多数据
}}
onEndReachedThreshold={0.1}
/>
);
}
}
React 原生 FlatList 组件是一个功能强大的列表组件,其高性能的渲染方式可以有效地提升长列表的渲染效率。在实际开发中,我们可以根据具体业务需求来灵活使用该组件。