【react-native】Flatlist下拉刷新以及上拉加载

Flatlist是一个高性能的简单列表组件，支持下面常用的功能

• 完全跨平台
• 支持水平布局模式
• 行组件显示或隐藏时可配置回调事件
• 支持单独的头部组件
• 支持单独的尾部组件
• 支持自定义行间分割线
• 支持下拉刷新
• 支持上拉加载
• 支持跳转到指定行
• 支持多列布局

1. 引用

import { View, Text, FlatList } from 'react-native'

2. 基本定义

  this.state = {
    refreshing: true,
    recordlist: [],
    page: 0, // 判断当前页数
    pageSize: 10, // 每页条数
    dataFlag: true, // 判断是否还有下一页
  }
  componentDidMount() {
    this.queryTradeRecordList(0)
  }
  /**
   * 加载列表
   */
  private queryTradeRecordList(page?: number) {
    requestTradeRecordList({
      page: page,
      size: this.state.pageSize
    }).then(({ rows }) => {
      this.setState((prevState) => {
        const recordlist = prevState.recordlist.concat(rows)
        return {
          recordlist: recordlist,
          refreshing: false,
          dataFlag: rows.length >= this.state.pageSize ? true : false
        }
      })
    }).catch(err => {
      this.setState({ refreshing: false })
    })
  }
  /**
   * 渲染滚动到底部时的组件
   */
  private renderListFooter() {
    const { dataFlag, recordlist, page } = this.state
    return (
      <View style={styles.footerItem}>
        {
          dataFlag && recordlist.length ? (<Text style={styles.footerTipText}>加载中...</Text>):
            !dataFlag && recordlist.length && page ? (<Text style={styles.footerTipText}>已全部加载</Text>) : null
        }
      </View>
    )
  }

3. 组件使用

<FlatList
  data={recordlist}
  renderItem={({ item }) => (
    // 每个item组件渲染
  )}
  keyExtractor={item => item.orderId}
  ListEmptyComponent={
    <Text style={styles.emptyText}>数据空空如也...</Text>
  }
  ListFooterComponent={this.renderListFooter()}
  onRefresh={() => {
    this.setState({ page: 0, recordlist: [], dataFlag: true, refreshing: true })
    this.queryTradeRecordList(0)
  }}
  onEndReachedThreshold={.1}
  onEndReached={() => {
    if (this.state.dataFlag) {
      let page = this.state.page * 1 + 1
      this.setState({
        page: page
      })
      this.queryTradeRecordList(page)
    }
  }}
/>

简单介绍

• data渲染列表。为了简化起见，data属性目前只支持普通数组。
• renderItem 从data中取出数据并渲染到列表中。
• keyExtractor用于给定的item生成一个不重复的key。Key的作用是使React能够区分同类元素的不同个体，以便在刷新时能够确定其变化的位置，减少重新渲染的开销。若不指定此函数，则默认抽取item.key作为 key 值。若item.key也不存在，则使用数组下标。
• ListEmptyComponent列表为空时渲染该组件。可以是 React Component,也可以是一个render函数，或者渲染好的 element。
• ListFooterComponent 尾部组件。可以是 React Component, 也可以是一个 render 函数，或者渲染好的 element。
• onRefresh 下拉刷新。如果设置了此选项，则会在列表头部添加一个标准的RefreshControl控件，以便实现“下拉刷新”的功能。同时你需要正确设置refreshing属性。
• onEndReachedThreshold 距离内容最底部还有多远时触发onEndReached回调。注意此参数是一个比值而非像素单位。比如，0.5 表示距离内容最底部的距离为当前列表可见长度的一半时触发。
• onEndReached 当列表被滚动到距离内容最底部不足onEndReachedThreshold的距离时调用。