项目app中用到了list滚动加载,把List做了下对比发现FlatList比较适合自己的项目,但是在实际运用中

onEndReached方法需要给定

onEndReachedThreshold的高度

但是给定0和1之间的值也没有找到正确的办法  ,会出现以下几个情况:

1.如果在onEndReached中更改data数据源,那么会出现循环调用;

2.将onEndReachedThreshold设置为0,则一直不会调用

3.将onEndReachedThreshold设置为大于0的值,则会调用多次onEndReached 方法,但是都是在页面加载完成之后,并且也不会出现"当列表被滚动到距离内容最底部不足onEndReachedThreshold的距离时调用"

在网上找了很久,终于找到一个解决办法

摘自https://www.questarter.com/q/flatlist-39-s-onendreached-not-fire-unless-setting-height-explicitly-in-react-native-27_43444690.html

reactnative中FlatList上拉加载更多的解决办法的更多相关文章

  1. react-native 模仿原生 实现下拉刷新/上拉加载更多(RefreshListView)

    1.下拉刷新/上拉加载更多 组件(RefreshListView) src/components/RefreshListView/index.js /** * 下拉刷新/上拉加载更多 组件(Refre ...

  2. react-native ListView 封装 实现 下拉刷新/上拉加载更多

    1.PageListView 组件封装 src/components/PageListView/index.js /** * 上拉刷新/下拉加载更多 组件 */ import React, { Com ...

  3. react-native-page-listview使用方法(自定义FlatList/ListView下拉刷新,上拉加载更多,方便的实现分页)

    react-native-page-listview 对ListView/FlatList的封装,可以很方便的分页加载网络数据,还支持自定义下拉刷新View和上拉加载更多的View.兼容高版本Flat ...

  4. react-native 自定义 下拉刷新 / 上拉加载更多 组件

    1.封装 Scroller 组件 /** * 下拉刷新/上拉加载更多 组件(Scroller) */ import React, {Component} from 'react'; import { ...

  5. React-Native 之 GD (七)下拉刷新 及 上拉加载更多

    1.下拉刷新  使用第三方插件 下载插件: $ npm install react-native-pull@latest --save 引入: import {PullList} from 'reac ...

  6. Android中自定义ListView实现上拉加载更多和下拉刷新

    ListView是Android中一个功能强大而且很常用的控件,在很多App中都有ListView的下拉刷新数据和上拉加载更多这个功能.这里我就简单记录一下实现过程. 实现这个功能的方法不止一个,Gi ...

  7. [RN] React Native 实现 FlatList上拉加载

     FlatList可以利用官方组件 RefreshControl实现下拉刷新功能,但官方没有提供相应的上拉加载的组件,因此在RN中实现上拉加载比下拉刷新要复杂一点. 不过我们仍可以通过FlatList ...

  8. 原生js移动端touch事件实现上拉加载更多

    大家都知道jQuery里没有touch事件,所以在移动端使用原生js实现上拉加载效果还是很不错的,闲话不多说,代码如下: //获取要操作的元素 var objSection = document.ge ...

  9. H5基于iScroll实现下拉刷新,上拉加载更多

    前言 前一段有个手机端的项目需要用到下拉刷新和上拉加载更多的效果,脑海里第一反映就是微博那种效果,刚开始的理解有些偏差,以为下拉也是追加数据,上拉也是追加数据,后请教同事后发现其实下拉只是刷新最新数据 ...

随机推荐

  1. FLYAI

    https://www.flyai.com/d/FacialAge FLYAI  竞赛说明 参加项目竞赛必须实现 model.py 中的predict_all方法,系统才能给出最终分数. 样例代码说明 ...

  2. Java网络编程之Netty

    一.Netty概述 Netty 是由JBOSS 提供的一个java 开源框架.Netty 提供异步的.事件驱动的网络应用程序框架和工具,用以快速开发高性能.高可靠性的网络服务器和客户端程序. 也就是说 ...

  3. HTTP请求客户端工具类

    1.maven 引入依赖 <dependency> <groupId>commons-httpclient</groupId> <artifactId> ...

  4. MySQL批量导入Excel数据

    MySQL批量导入Excel数据 1.确定需要导入数据的表名称以及字段,然后在新建的Excel表中,按照表字段正确排序:(注:(Excel文件的名称最好和数据库的名称一致,sheet表的名字最好和表名 ...

  5. springboot之多模块化项目打包

    1.目录结构 2.打成war包,只需在web子项目中的pom文件中添加 <packaging>war</packaging> <build> <!-- 为ja ...

  6. 【转】地球坐标系 (WGS-84) 到火星坐标系 (GCJ-02) 的转换算法 C#

    // // Copyright (C) 1000 - 9999 Somebody Anonymous // NO WARRANTY OR GUARANTEE // using System; name ...

  7. 阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_06-SpringSecurityOauth2研究-Oauth2授权码模式-申请令牌

    3.3 Oauth2授权码模式 3.3.1 Oauth2授权模式 Oauth2有以下授权模式: 授权码模式(Authorization Code) 隐式授权模式(Implicit) 密码模式(Reso ...

  8. pod install [!] Unable to find a specification for `XXX`

    今天下载了别人的源码学习的时候,执行pod install报错如下: 解决办法: 更新下pod即可. pod update install成功.

  9. Vue-cli安装,创建Vue项目

    1.安装脚手架: npm install -g vue-cli 2.查看vue: vue 3.查看可以使用的模板: vue list 4.创建项目sell: vue init webpack sell ...

  10. Spring Cloud(7.2):配置Producer Server

    我们首先创建一个生产者服务.这里以一个商品价格服务为例,这个微服务可以对商品-价格信息进行增删改查,当有商品-价格信息被更新或删除,则该微服务发送消息,告诉其他调用它的系统这条信息已经被修改. 配置p ...