之前的项目此功能做的太复杂，今天简化了一下

列表文件：

类外侧定义变量，直接可赋值，不需要setState。

let ListData = []
let page = 1
export default class TaskOrderFiller extends Component {

    
    componentWillMount() {
        this.searchDate({ page: page }) //请求接口
    }

    componentWillUnmount() {//页面销毁重置变量
        ListData = []
        page = 1
    }
    
    //自己封装基于fetch的post请求，data为返回的数据
    searchDate = (value) => {
        Util.post(this, url, value,
            (code, message, data) => {
                if (data.length < 0) {
                    this.setState({ hasData: false })
                } else {
                    ListData = ListData.concat(data)
                    this.setState({ hasData: true,isrefresh:false })
                }
            },
            (error) => {
                console.log('Fetch PageDate error: ' + error);

            }
        );
    }

    _renderRow(item) {
        // console.log('item', item)
        return (
            <Card>
                //列表的item
            </Card>
        )
    }

    /**
   * 空布局
   */
    _createEmptyView() {
        return (
            <View>
                {/* <Image
                    style={styles.noData}
                    source={require('../images/NullData/43_bg.png')} /> */}
                    空布局
            </View>
        );
    }

    _renderFooter() {
        let { hasData } = this.state
        return (
            <View>
                {hasData ?
                    <LoadMoreFooter />
                    :
                    <View><Text>已经加载全部</Text></View>
                }
            </View>
        )
    }

    // 上拉加载
    _onLoadMore() {
        page++
        this.searchDate({ page: page })
    }

    // 下拉刷新
    _onRefresh() {
        page = 1;
        ListData=[]
        this.searchDate({page:page})
        this.setState({isrefresh:true})
    }


    render() {
        let {isrefresh}=this.state
        return(
            <View>
            {ListData.length ? <FlatList
                            data={ListData}
                            renderItem={({ item }) => this._renderRow(item)}
                            keyExtractor={this.keyExtractor}
                            ListEmptyComponent={this._createEmptyView}
                            refreshing={true}
                            ListFooterComponent={this._renderFooter.bind(this)}
                            onEndReachedThreshold={0.1}
                            onEndReached={() => this._onLoadMore()}
                            refreshControl={
                                <RefreshControl
                                    title="正在加载中……"
                                    color="#ccc"
                                    refreshing={isrefresh}
                                    onRefresh={() => {
                                        this._onRefresh();
                                    }}
                                />
                            }
                        /> : <Loading />}
           </View>
        )
    }

}

其中 <Loading />、 <LoadMoreFooter /> 为自定义的加载动画，喜欢的可以拿去用。

/**
 * ShopReactNative
 *
 * @author Tao
 * @date 2019-08
 * 
 
 * @license The MIT License (MIT)
 */

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

export default class LoadMoreFooter extends React.Component {
    render() {
        return (
            <View style={styles.footer}>
                <ActivityIndicator />
                <Text style={styles.footerTitle}>正在加载更多……</Text>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    footer: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        height: 40,
    },

    footerTitle: {
        marginLeft: 10,
        fontSize: 15,
        color: 'gray'
    }
})

/**
 * ShopReactNative
 *
 * @author Tao
 * @date 2019-08
 * 
 
 * @license The MIT License (MIT)
 */

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

import Common from '../common/constants';

export default class Loading extends React.Component {
    render() {
        return (
            <View style={styles.loading}>
                <ActivityIndicator color="white"/>
                <Text style={styles.loadingTitle}>加载中……</Text>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    loading: {
        backgroundColor: 'gray',
        height: 80,
        width: 100,
        borderRadius: 10,
        justifyContent: 'center',
        alignItems: 'center',
        position: 'absolute',
        top: (Common.window.height-80)/2,
        left: (Common.window.width-100)/2,
    },

    loadingTitle: {
        marginTop: 10,
        fontSize: 14,
        color: 'white'
    }
})

上拉加载更多思路：

1、页面初始化之前请求接口，渲染页面

2、当FlatList组件触发_onLoadMore事件后，发送请求，且page++，如果返回还有数据，hasData置为true，LoadMoreFooter过渡动画结构渲染，请求中ListData数据合并，直到无数据hasData置为false，渲染“已经加载全部”标签。

下拉刷新思路：数据清空，page置为1，重发请求

注意点：“下拉加载更多” 有触发条件，自己根据布局（父子元素的高度关系）适当调整！！！！！！！！！！！