react native学习笔记13——FlatList上拉加载

React 前端之家
前端之家收集整理的这篇文章主要介绍了react native学习笔记13——FlatList上拉加载，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

我们可以利用官方组件RefreshControl实现下拉刷新功能，但React Native官方没有提供相应的上拉加载的组件，因此在RN中实现上拉加载比下拉刷新要复杂一点。
虽然没有直接提供上拉加载的组件，不过我们仍可以通过FlatList的onEndReached与onEndReachedThreshold属性来实现相应效果。

ActivityIndicator

这里上拉加载的转圈效果用ActivityIndicator表现。在开始上拉加载的实现之前先介绍一下官方组件ActivityIndicator——加载指示器。ActivityIndicator的使用很简单。

<ActivityIndicator
        animating={true}
        color='red'
        size="large"
    />

属性

属性 类型 描述
animating bool 是否要显示指示器，默认为true，表示显示。
color string 滚轮的前景颜色（默认为灰色）。
hidesWhenStopped(ios) bool 在没有动画的时候，是否要隐藏指示器（默认为true）。
size enum(‘small’,‘large’) 指示器的大小。small的高度为20，large为36。

加载页

根据上述ActivityIndicator属性的介绍，可以使用ActivityIndicator实现一个简单的加载页面:

import React,{Component} from "react";
import {ActivityIndicator,StyleSheet,View} from "react-native";

export default class ActivityIndicatorDemo extends Component {
    render() {
        return (
            <View style={styles.container}> <ActivityIndicator  animating={true} color='red' size="large" /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1,flexDirection: 'row',justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',},});

其效果如下：

上拉加载的实现

下面进入正篇——上拉加载的实现
上拉加载一般应用于分页加载的情况，为了真实的模拟网络请求数据上拉刷新加载更多的使用场景，这里使用github提供的api。

思路

当FlatList滑动到底部时，页面数加一，触发请求新一页的网络数据，更新到组件state中的数据源dataArray中，dataArray也作为FlatList的数据源data。实现滑动到底部触发网络请求通过FlatList的onEndReached和onEndReachedThreshold属性，onEndReached是在当列表被滚动到距离内容最底部不足onEndReachedThreshold的距离时调用。

具体实现

全局变量

const REQUEST_URL = 'https://api.github.com/search/repositories?q=javascript&sort=stars&page=';
let pageNo = 1;//当前第几页
let totalPage=5;//总的页数
let itemNo=0;//item的个数

初始化state

constructor(props) {
        super(props);
        this.state = {
            isLoading: true,//网络请求状态
            error: false,errorInfo: "",dataArray: [],showFoot:0,// 控制foot， 0：隐藏footer 1：已加载完成,没有更多数据 2 ：显示加载中
            isRefreshing:false,//下拉控制
        }
    }

网络请求——获取第n页数据

//网络请求——获取第pageNo页数据
    fetchData(pageNo) {
        //这个是js的访问网络的方法
        fetch(REQUEST_URL+pageNo)
            .then((response) => response.json())
            .then((responseData) => {
                let data = responseData.items;
                let dataBlob = [];
                let i = itemNo;

                data.map(function (item) {
                    dataBlob.push({
                        key: i,value: item,})
                    i++;
                });
                itemNo = i;
                console.log("itemNo:"+itemNo);
                let foot = 0;
                if(pageNo>=totalPage){
                    foot = 1;//listView底部显示没有更多数据了
                }

                this.setState({
                    //复制数据源
                    dataArray:this.state.dataArray.concat(dataBlob),isLoading: false,showFoot:foot,isRefreshing:false,});
                data = null;
                dataBlob = null;
            })
            .catch((error) => {
                this.setState({
                    error: true,errorInfo: error
                })
            })
            .done();
    }

准备加载组件
在初始化state之后，渲染组件前，请求网络数据。

componentDidMount() {
        //请求数据
        this.fetchData( pageNo );
    }

渲染组件

render() {
        //第一次加载等待的view
        if (this.state.isLoading && !this.state.error) {
            return this.renderLoadingView();
        } else if (this.state.error) {
            //请求失败view
            return this.renderErrorView();
        }
        //加载数据
        return this.renderData();
    }

加载等待页
利用上面介绍的ActivityIndicator，实现加载等待页。

renderLoadingView() {
        return (
            <View style={styles.container}> <ActivityIndicator  animating={true} color='red' size="large" /> </View> ); }

加载网络请求失败页
网络请求失败，显示失败信息页。

renderErrorView() {
        return (
            <View style={styles.container}> <Text> Fail </Text> </View> ); }

加载数据显示页

renderData() {
        return (
            <FlatList  data={this.state.dataArray} renderItem={this._renderItemView} ListFooterComponent={this._renderFooter.bind(this)} onEndReached={this._onEndReached.bind(this)} onEndReachedThreshold={1} ItemSeparatorComponent={this._separator} /> ); }

每个item组件渲染
renderItem根据行数据data渲染每一行的组件。

//返回itemView
    _renderItemView({item}) {
        return (
            <View> <Text style={styles.title}>name: {item.value.name} ({item.value.stargazers_count} stars)</Text> <Text style={styles.content}>description: {item.value.description}</Text> </View> ); }

尾部组件的渲染
ListFooterComponent为尾部组件的渲染
当showFoot为2时显示loading的动态效果是用ActivityIndicator来实现的。

_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={styles.footer}> <ActivityIndicator /> <Text>正在加载更多数据...</Text> </View> ); } else if(this.state.showFoot === 0){ return ( <View style={styles.footer}> <Text></Text> </View> ); } }

上拉加载
上拉加载的关键onEndReached，当列表被滚动到距离内容最底部不足onEndReachedThreshold的距离时调用。注意：onEndReachedThreshold的值不是像素单位而是比值，例如，0.5表示距离内容最底部的距离为当前列表可见长度的一半时触发。

_onEndReached(){
        //如果是正在加载中或没有更多数据了，则返回
        if(this.state.showFoot != 0 ){
            return ;
        }
        //如果当前页大于或等于总页数，那就是到最后一页了，返回
        if((pageNo!=1) && (pageNo>=totalPage)){
            return;
        } else {
            pageNo++;
        }
        //底部显示正在加载更多数据
        this.setState({showFoot:2});
        //获取数据
        this.fetchData( pageNo );
    }
}

分隔线
ItemSeparatorComponent行与行之间的分隔线组件,不会出现在第一行之前和最后一行之后。

_separator(){
        return <View style={{height:1,backgroundColor:'#999999'}}/>;
    }

效果图如下：

最后附上完整代码：

import React,FlatList,Text,View} from "react-native";

const REQUEST_URL = 'https://api.github.com/search/repositories?q=javascript&sort=stars&page=';
let pageNo = 1;//当前第几页
let totalPage=5;//总的页数
let itemNo=0;//item的个数
export default class LoadMoreDemo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoading: true,//下拉控制
        }
    }

    //网络请求——获取第pageNo页数据
    fetchData(pageNo) {
        //这个是js的访问网络的方法
        fetch(REQUEST_URL+pageNo)
            .then((response) => response.json())
            .then((responseData) => {
                let data = responseData.items;
                let dataBlob = [];
                let i = itemNo;

                data.map(function (item) {
                    dataBlob.push({
                        key: i,errorInfo: error
                })
            })
            .done();
    }

    componentDidMount() {
        //请求数据
        this.fetchData( pageNo );
    }

    //加载等待页
    renderLoadingView() {
        return (
            <View style={styles.container}> <ActivityIndicator  animating={true} color='red' size="large" /> </View> ); } //加载失败view renderErrorView() { return ( <View style={styles.container}> <Text> Fail </Text> </View> ); } //返回itemView _renderItemView({item}) { return ( <View> <Text style={styles.title}>name: {item.value.name}</Text> <Text style={styles.content}>stars: {item.value.stargazers_count}</Text> <Text style={styles.content}>description: {item.value.description}</Text> </View> ); } renderData() { return ( <FlatList  data={this.state.dataArray} renderItem={this._renderItemView} ListFooterComponent={this._renderFooter.bind(this)} onEndReached={this._onEndReached.bind(this)} onEndReachedThreshold={1} ItemSeparatorComponent={this._separator} /> ); } render() { //第一次加载等待的view if (this.state.isLoading && !this.state.error) { return this.renderLoadingView(); } else if (this.state.error) { //请求失败view return this.renderErrorView(); } //加载数据 return this.renderData(); } _separator(){ return <View style={{height:1,backgroundColor:'#999999'}}/>;
    }
    _renderFooter(){
        if (this.state.showFoot === 1) {
            return (
                <View style={{height:30,}}> 没有更多数据了 </Text> </View> ); } else if(this.state.showFoot === 2) { return ( <View style={styles.footer}> <ActivityIndicator /> <Text>正在加载更多数据...</Text> </View> ); } else if(this.state.showFoot === 0){ return ( <View style={styles.footer}> <Text></Text> </View> ); } } _onEndReached(){ //如果是正在加载中或没有更多数据了，则返回 if(this.state.showFoot != 0 ){ return ; } //如果当前页大于或等于总页数，那就是到最后一页了，返回 if((pageNo!=1) && (pageNo>=totalPage)){ return; } else { pageNo++; } //底部显示正在加载更多数据 this.setState({showFoot:2}); //获取数据 this.fetchData( pageNo ); } } const styles = StyleSheet.create({ container: { flex: 1,title: { fontSize: 15,color: 'blue',footer:{ flexDirection:'row',height:24,justifyContent:'center',marginBottom:10,content: { fontSize: 15,color: 'black',} });

猜你在找的React相关文章

react使用moment进行日期格式化
导入moment 使用方式 年月日，时分秒 星期几 相对时间 7天后 2小时后 明天 将毫秒转换成年...
推荐使用并手写实现redux-actions原理
@ 一、前言 为什么介绍redux-actions呢? 第一次见到主要是接手公司原有的项目，发现有之前...
【译】值得推荐的十大React Hook 库
十大React Hook库 原文地址：https://dev.to/bornfightcompany/top-10-react-hook-librari...
React生命周期
React生命周期 React的生命周期从广义上分为挂载、渲染、卸载三个阶段，在React的整个生命...
React虚拟DOM的理解
React虚拟DOM的理解 Virtual DOM是一棵以JavaScript对象作为基础的树，每一个节点可以将其...
使用react-native-vector-icons（RN0.6+）
1.安装 npm install --save react-native-vector-icons or yarn add react-native-vector-...
React中的Props, State 与 render 函数
React 的核心特性总结 1、React：声明式开发 (JS或者jQuery属性命令式开发） 2、可以与其他...
React开发环境准备
react fiber 指react 16以上的版本 引入react的方式： 1、引入.js文件 2、使用脚手架工具（...
React组件拆分与传值
组件拆分与组件之间的传值 父子组件的概念： 父组件通过属性的方式，向自组件传值 子组件通...
React组件的简单演示
src/Test.js import React from &#39;react&#39;; function Test() { return ( &a...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作