在移動(dòng)端開發(fā)中列表頁(yè)是非常常見的頁(yè)面，在React Native中我們一般使用FlatList或SectionList組件實(shí)現(xiàn)這些列表視圖。通常列表頁(yè)都會(huì)有大量的數(shù)據(jù)需要加載顯示，這時(shí)候就用到了分頁(yè)加載，因此對(duì)于列表組件來(lái)說(shuō)，實(shí)現(xiàn)下拉刷新和上拉加載在很多情況下是必不可少的。

本篇文章基于FlatList封裝一個(gè)支持下拉刷新和上拉加載的RefreshListView，對(duì)原始的FlatList進(jìn)行封裝之后，再調(diào)用上拉和下拉刷新就十分方便了。

下拉刷新的實(shí)現(xiàn)十分簡(jiǎn)單，這里我們沿用FlatList本身的屬性來(lái)實(shí)現(xiàn)

onRefresh— 設(shè)置此選項(xiàng)后，則會(huì)在列表頭部添加一個(gè)標(biāo)準(zhǔn)的RefreshControl控件，以便實(shí)現(xiàn)“下拉刷新”的功能。同時(shí)你需要正確設(shè)置refreshing屬性。

refreshing—— bool值，用來(lái)控制刷新控件的顯示與隱藏。刷新完成后設(shè)為false。

通過(guò)這兩個(gè)屬性設(shè)置我們就可以實(shí)現(xiàn)FlatList頭部的刷新操作，控件使用默認(rèn)的樣式，Android和iOS沿用各自系統(tǒng)的組件來(lái)顯示。

重點(diǎn)在于上拉加載更多，React Native的列表組件中沒(méi)有這個(gè)功能，需要我們自己實(shí)現(xiàn)。 對(duì)于上拉加載，通常我們有幾種狀態(tài)，這里我創(chuàng)建一個(gè)RefreshState.js文件存放上拉加載的狀態(tài)：

export default { Idle: 'Idle',        // 初始狀態(tài)，無(wú)刷新的情況 CanLoadMore: 'CanLoadMore', // 可以加載更多，表示列表還有數(shù)據(jù)可以繼續(xù)加載 Refreshing: 'Refreshing',  // 正在刷新中 NoMoreData: 'NoMoreData',  // 沒(méi)有更多數(shù)據(jù)了 Failure: 'Failure'     // 刷新失敗}

然后根據(jù)這幾種狀態(tài)來(lái)封裝一個(gè)RefreshFooter組件，使其根據(jù)不同狀態(tài)顯示不同內(nèi)容，廢話不多說(shuō)上代碼：

import React, {Component} from 'react';import {View, Text, ActivityIndicator, StyleSheet, TouchableOpacity} from 'react-native';import RefreshState from './RefreshState';import PropTypes from 'prop-types';export default class RefreshFooter extends Component { static propTypes = {  onLoadMore: PropTypes.func,   // 加載更多數(shù)據(jù)的方法  onRetryLoading: PropTypes.func, // 重新加載的方法 };  static defaultProps = {  footerRefreshingText: "努力加載中",  footerLoadMoreText: "上拉加載更多",  footerFailureText: "點(diǎn)擊重新加載",  footerNoMoreDataText: "已全部加載完畢" };  render() {  let {state} = this.props;  let footer = null;  switch (state) {   case RefreshState.Idle:    // Idle情況下為null，不顯示尾部組件    break;   case RefreshState.Refreshing:    // 顯示一個(gè)loading視圖    footer =     <View style={styles.loadingView}>      <ActivityIndicator size="small"/>      <Text style={styles.refreshingText}>{this.props.footerRefreshingText}</Text>     </View>;    break;   case RefreshState.CanLoadMore:    // 顯示上拉加載更多的文字    footer =     <View style={styles.loadingView}>      <Text style={styles.footerText}>{this.props.footerLoadMoreText}</Text>     </View>;    break;   case RefreshState.NoMoreData:    // 顯示沒(méi)有更多數(shù)據(jù)的文字，內(nèi)容可以自己修改    footer =     <View style={styles.loadingView}>      <Text style={styles.footerText}>{this.props.footerNoMoreDataText}</Text>     </View>;    break;   case RefreshState.Failure:    // 加載失敗的情況使用TouchableOpacity做一個(gè)可點(diǎn)擊的組件，外部調(diào)用onRetryLoading重新加載數(shù)據(jù)    footer =     <TouchableOpacity style={styles.loadingView} onPress={()=>{      this.props.onRetryLoading && this.props.onRetryLoading();     }}>      <Text style={styles.footerText}>{this.props.footerFailureText}</Text>     </TouchableOpacity>;    break;  }  return footer; }}const styles = StyleSheet.create({ loadingView: {  flexDirection: 'row',  justifyContent: 'center',  alignItems: 'center',  padding: 15, }, refreshingText: {  fontSize: 12,  color: "#666666",  paddingLeft: 10, }, footerText: {  fontSize: 12,  color: "#666666" }});