React Native Flast 刷新及加载更多

1.FlastList.tsx代码

import React, {Component} from 'react'
import {Dimensions, FlatList, StyleSheet, View} from 'react-native';
import _ from 'lodash'
//redux
import {connect} from 'react-redux'
//@ts-ignore
import {Button, Input, ModalIndicator, Toast} from 'teaset';
//custom
import {Theme} from "../../commons/Theme";
import {requestForOrder} from "../../request/RequestHelper";
import CommonFlatListFooter, {ROOT_TYPE} from '../../commons/CommonFlatListFooter';
import CommonFlatListEmpty from '../../commons/CommonFlatListEmpty';
import OrderListCell from './OrderListCell';
//为了代码规范TypeScript写法不用可忽略
interface OrderListProps {
  navId:number
  page:number
  onPressItem?:(item:OrderListItem) => void
}
//为了代码规范TypeScript写法不用可忽略
interface OrderListState extends State {
  orderList:OrderListItem[]
  page: number,
  loading: {
    show: boolean,
    //控制底部footer状态的枚举
    foot: ROOT_TYPE
  }
}

class OrderList extends Component<OrderListProps, OrderListState> {

  pageNumber: number

  constructor(props: OrderListProps) {
    super(props)
    this.state = {
      orderList:[],
      page: 1,
      loading:{
        show:false,
        foot:ROOT_TYPE.Ready
      }
    }
    this.pageNumber = 20
  }

  componentDidMount() {
    this.initData()
  }
  showRefreshLoading(show: boolean) {
    this.setState({
      loading: {
        ...this.state.loading,
        show: show
      }
    })
  }

  initData = () => {
    this.showRefreshLoading(true)
    requestForOrder(this.props.navId,this.props.page)
      .then(res => {
        let foot = ROOT_TYPE.Ready
        // @ts-ignore
        if (res.list.length < this.pageNumber) {
          foot = ROOT_TYPE.Nomore
        }
        this.setState({
          // @ts-ignore
          orderList:this.cleanData([],res.list),
          page: 1,
          loading: {
            foot: foot,
            show: false
          }
        })
      })

  }

  loadMore = () => {
    //如果已无更多数据则return
    if (this.state.loading.foot === ROOT_TYPE.Nomore) {
      return
    }
    //上拉时foot显示为加载中
    this.setState({
      loading: {
        ...this.state.loading,
        foot: ROOT_TYPE.Loading
      }
    })
    //页码加1
    let pn = this.state.page + 1
    requestForOrder(this.props.navId,pn)
      .then(res => {
        //请求完成foot显示为默认的上拉加载更多
        let foot = ROOT_TYPE.Ready
        // 判断是否还有下一页此处也可根据总页数判断
        if (res.list.length < this.pageNumber) {
          //如果当前页返回的数据数小于每页长度foot显示为已无更多
          foot = ROOT_TYPE.Nomore
        }
        this.setState({
          // @ts-ignore
          orderList: this.cleanData(this.state.orderList, res.list),
          page: pn,
          loading: {
            ...this.state.loading,
            foot: foot
          }
        })
      })
  }

  // 清洗数据
  cleanData(old:OrderListItem[], news:OrderListItem[]){
    return _.chain(old).concat(news).uniqBy(i => i.id).value()
  }

  render() {
    return (
      <View style={styles.container}>
            <FlatList
              style={{backgroundColor: Theme.color.defaultBackground}}
              data={this.state.orderList}
              renderItem = {
                ({item,index}) => {
                  //@ts-ignore
                  return <OrderListCell orderItem={item} onItemPress={() => {
                    this.props.onPressItem && this.props.onPressItem(item)
                  }}/>
                }
              }
              keyExtractor={(item,index) =>String(item.id)}
              refreshing={this.state.loading.show}
              onRefresh={this.initData}
              onEndReached={this.loadMore}
              ListFooterComponent={<CommonFlatListFooter status={this.state.loading.foot} />}
              ListEmptyComponent={<CommonFlatListEmpty descriptionStr={'暂无注单'} />}
            />

      </View>
    );
  }

}

function select(store: any) {
  return {}
}

export default connect(select)(OrderList)

const {width, height} = Dimensions.get('window')

const styles = StyleSheet.create({

  scroller: {
    flex: 1,
    backgroundColor: Theme.color.defaultBackground,
  },

  container: {
    flex: 1,
    backgroundColor: Theme.color.defaultBackground,
  }
});

2. ListFooterComponent.tsx代码

import React from 'react'
import { Component } from 'react';
import { StyleSheet, View, Dimensions,Text } from 'react-native';

//redux
import { connect } from 'react-redux'

//request

//custom
import { Theme } from "../commons/Theme";

interface CommonFlatListFooter_Props {
  status: ROOT_TYPE
}

interface CommonFlatListFooter_State {
}

class CommonFlatListFooter extends Component<CommonFlatListFooter_Props, CommonFlatListFooter_State> {

  constructor(props: CommonFlatListFooter_Props) {
    super(props)
    this.state = {
    }
  }

  render() {
    switch (this.props.status) {
      case ROOT_TYPE.Loading:
        return (
          <View style={styles.container}>
            <Text style={styles.textColor}>加载中...</Text>
          </View>
        );
      case ROOT_TYPE.Nomore:
        return (
          <View style={styles.container}>
            <Text style={styles.textColor}>已无更多</Text>
          </View>
        )
      default:
        return (
          <View style={styles.container}>
            <Text style={styles.textColor}>上拉加载更多</Text>
          </View>
        );
    }
  }

}

function select(store: any) {
  return {
  }
}

export default connect(select)(CommonFlatListFooter)

export const enum ROOT_TYPE {
  Loading = 0,
  Ready = 1,
  Nomore = 2
}

const { width, height } = Dimensions.get('window')

const styles = StyleSheet.create({
  textColor:{
    color:Theme.color.borderColor
  },
  container:{
    height:44,
    justifyContent:'center',
    alignItems:'center'
  }
});

3. ListEmptyComponent.tsx代码

import React from 'react'
import { Component } from 'react';
import { StyleSheet, View, Dimensions, TouchableOpacity,Text} from 'react-native';

//redux
import { connect } from 'react-redux'

//request

//custom
import {Theme} from "./Theme";

interface CommonFlatListEmpty_Props {
  descriptionStr?:string
  touchAction?:() => void
}

interface CommonFlatListEmpty_State {
}

class CommonFlatListEmpty extends Component<CommonFlatListEmpty_Props,CommonFlatListEmpty_State> {
  
  constructor(props: CommonFlatListEmpty_Props) {
    super(props)
    this.state = {
    }
  }
  
  render() {
    return (
      <View style={styles.emptyView}>
        <TouchableOpacity onPressOut={this.onPress}>
          <View>
            <Text style={styles.text}>{this.props.descriptionStr?this.props.descriptionStr:''}</Text>
          </View>
        </TouchableOpacity>
      </View>
      
    );
  }

  onPress = () => {
    this.props.touchAction && this.props.touchAction()
  }
  
}

function select(store:any) {
  return {
  }
}

export default connect(select)(CommonFlatListEmpty)

const {width, height} = Dimensions.get('window')

const styles = StyleSheet.create({
  emptyView:{flex:1,justifyContent:'center',alignItems:'center',height:108},
  text:{color:Theme.color.dividerColor}
});