📌  相关文章
📜  React 原生 FlatList 组件(1)

📅  最后修改于: 2023-12-03 15:19:44.952000             🧑  作者: Mango

React 原生 FlatList 组件

介绍

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 组件是一个功能强大的列表组件,其高性能的渲染方式可以有效地提升长列表的渲染效率。在实际开发中,我们可以根据具体业务需求来灵活使用该组件。