rn 列表上拉加载下拉刷新

参考

componentDidMount() {

        this.requestData();
    }

    refreshData() {
        this.totalPage = 0;
        this.pageNo = 0;
        this.dataSource = [];

        this.setState({
            isRefresh:true
        },() =>{
            this.requestData()
        })
    }

    requestData() {

        if (this.state.inputText) {

            this.props.searchListRequest({
                page: this.pageNo,
                size: 10,
                name: this.state.inputText,
                tags: this.state.inputText
            })
        } else {

            this.props.queryFindMoreRequest({
                page: this.pageNo,
                size: 10,
                tags: this.props.loginData.tags
            });
        }
    }
render() {

        const {navigation, clubQueryFindMoreState} = this.props;

        if (clubQueryFindMoreState.status === CLUB_QUERY_FIND_MORE_SUCCESS) {

//计算总共多少页,尾部显示没有数据
            this.totalPage = clubQueryFindMoreState.result.total / 10;

//尾部显示和刷新菊花设置
            this.setState({showFoot: this.pageNo > this.totalPage ? 1 : 0,isRefresh:false});

//加载更多的数据拼到后面
            clubQueryFindMoreState.result.data.map((item, index) => {
                this.dataSource.push(item)
            });
            this.props.queryFindMoreEnd();
        } else if (clubQueryFindMoreState.status === CLUB_SEARCH_LIST_SUCCESS) {

            this.totalPage = clubQueryFindMoreState.result.total / 10;
            this.setState({showFoot: this.pageNo > this.totalPage ? 1 : 0,isRefresh:false});

            clubQueryFindMoreState.result.data.map((item, index) => {
                this.dataSource.push(item)
            });
            this.props.searchListEnd();
        } else if (clubQueryFindMoreState.status === CLUB_QUERY_FIND_MORE_ERROR || clubQueryFindMoreState.status === CLUB_SEARCH_LIST_ERROR) {
            console.log('err: ' + clubQueryFindMoreState.message);
        } else {
        }

        return (
<FlatList
                            renderItem={this._renderItem.bind(this)}
                            data={this.dataSource}
                            keyExtractor={this._keyExtractor}
                            extraData={this.state}
                            showsVerticalScrollIndicator={false}
                            ItemSeparatorComponent={this._separator}
                            //下拉刷新相关
                            onRefresh={() => this._onRefresh()}
                            refreshing={this.state.isRefresh}
                            //加载更多
                            onEndReached={this._onEndReached.bind(this)}
                            onEndReachedThreshold={1}
                            ListFooterComponent={this._renderFooter.bind(this)}
                        />
)
}
_onRefresh() {

        this.refreshData()
    }
_onEndReached() {
        //如果是正在加载中或没有更多数据了,则返回
        if (this.state.showFoot != 0) {
            return;
        }
        //如果当前页大于或等于总页数,那就是到最后一页了,返回
        if ((this.pageNo != 1) && (this.pageNo >= this.totalPage)) {
            return;
        } else {
            this.pageNo++;
        }
        //底部显示正在加载更多数据
        this.setState({showFoot: 2});
        //获取数据
        this.requestData()
    }
_renderFooter() {
        if (this.state.showFoot === 1) {
            return (
                <View style={{height: 30, alignItems: 'center', justifyContent: 'flex-start',}}>
                    <Text style={{color: '#999999', fontSize: 14, marginTop: 5, marginBottom: 5,}}>
                        没有更多数据了
                    </Text>
                </View>
            );
        } else if (this.state.showFoot === 2) {
            return (
                <View style={{height: 30, flexDirection: 'row', alignItems: 'center', justifyContent: 'center',}}>
                    <ActivityIndicator/>
                    <Text style={{color: '#999999', fontSize: 14, marginTop: 5, marginBottom: 5,}}>正在加载更多数据...</Text>
                </View>
            );
        } else if (this.state.showFoot === 0) {
            return (
                <View style={{height: 30, alignItems: 'center', justifyContent: 'flex-start',}}>
                    <Text></Text>
                </View>
            );
        }
    }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容