问题

在写flatlist复用组件时，调用的时候如果父组件是不定高的组件，会造成组件无法显示

如果父组件样式{flex：1}，则会出现下拉方法频繁触发或不正常触发的问题（我这里出现的问题是在列表第6个项目在底部时，缓慢上拉会多次触发flatlist的onEndReached监听）

原因

推测是因为{flex：1}不适合做动态高度组件的父组件样式，会错误的判断高度导致onEndReached多次不正常触发。

解决

可以把列表上方所需的组件做成header属性传入组件当做flatlist的头部组件，这样就可以直接调用封装好的组件。

也可以把父元素的样式设成{height: '100%'}，这样就可以正确的触发onEndReached监听。

react-native flatlist 上拉加载onEndReached方法频繁触发的问题的更多相关文章

  1. AngularJS进阶(三十八)上拉加载问题解决方法

    AngularJS上拉加载问题解决方法 项目中始终存在一个问题:当在搜索栏输入关键词后(见图1),按照既定的业务逻辑应该是服务端接收到请求后,首先返回查询的前7条数据,待客户端出现上拉加载时,继续查找 ...

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

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

  3. reactnative中FlatList上拉加载更多的解决办法

    项目app中用到了list滚动加载,把List做了下对比发现FlatList比较适合自己的项目,但是在实际运用中 onEndReached方法需要给定 onEndReachedThreshold的高度 ...

  4. RecyclerView下拉刷新上拉加载（二）

    listview下拉刷新上拉加载扩展(一) http://blog.csdn.net/baiyuliang2013/article/details/50252561 listview下拉刷新上拉加载扩 ...

  5. Vue(小案例_vue+axios仿手机app)_上拉加载

    ---恢复内容开始--- 一.前言                                                                                    ...

  6. 上拉加载下拉刷新控件WaterRefreshLoadMoreView

    上拉加载下拉刷新控件WaterRefreshLoadMoreView 效果: 源码: // // SRSlimeView // @author SR // Modified by JunHan on ...

  7. Flutter实战视频-移动电商-20.首页_火爆专区上拉加载效果

    20.首页_火爆专区上拉加载效果 上拉加载的插件比较都.没有一个一枝独秀的 可以自定义酷炫的header和footer 一直在更新 推荐使用这个插件: https://github.com/xuelo ...

  8. vue mint-ui 框架下拉刷新上拉加载组件的使用

    安装 npm i mint-ui -S 然后在main.js中引入 import MintUI from 'mint-ui' import 'mint-ui/lib/style.css' Vue.us ...

  9. 免插件，简单实现上拉加载loading

    上拉加载是前端经常遇到的问题,采用插件往往能够轻松解决,这里介绍一种免插件简单实现上拉加载的方法,参考一下,下面分享一下代码. html <body> <ul> <li& ...

随机推荐

  1. mysql 端口修改

    mysql 修改端口 1.  停止mysql服务 2.  打开文件夹下my.ini文件.(E:\mysql-5.7-3307) 修改文件中的port值,注意两个地方: [client]default- ...

  2. An Apple a day keeps the doctor away

    An apple a day keeps the doctor away. 一天一苹果,不用请医生. 活学活用:apple as like as an apple to an oyster 毫无相同之 ...

  3. 【vue】路由配置

    一般组件我们会有全屏组件,或是在页面的某个部分显示组件,所以路由的第一层一般是全屏显示的,而在/目录下的组件为页面的某个部分显示的,通常需求是这样的,登录是全屏显示的,而普通页面是在页面的某个部分进行 ...

  4. window开发环境常用操作

    1. 启动redis命令 redis-server redis.windows.conf 如果法正常启用,出现如下问题 windows下第一次通过以下命令启动redis (*:此处整理转载自:http ...

  5. Stm32复习之时钟系统

    地点:南图 这部分的内容是整个STM32学习知识的核心,不管是什么微控制器处理器,时钟系统都是其核心类似于人之心脏,因此学好理解这一章节至关重要. 为了便于理解这一系统,将从以下几个层次来讲.(忘了是 ...

  6. 非旋 treap 结构体数组版（无指针）详解，有图有真相

    非旋  $treap$ (FHQ treap)的简单入门 前置技能 建议在掌握普通 treap 以及 左偏堆(也就是可并堆)食用本blog 原理 以随机数维护平衡,使树高期望为logn级别, FHQ  ...

  7. 【easy】118.119.杨辉三角

    这题必会啊!!! 第一题118. class Solution { public: vector<vector<int>> generate(int numRows) { ve ...

  8. mycat 测试主从读写分离

    下载解压及创建用户组和目录属性 下载地址:1.https://github.com/MyCATApache/Mycat-download.2.http://dl.mycat.io/ wget http ...

  9. SlopeOne

    相信大家对如下的Category都很熟悉,很多网站都有类似如下的功能,“商品推荐”,"猜你喜欢“,在实体店中我们有导购来为我们服务,在网络上 我们需要同样的一种替代物,如果简简单单的在数据库 ...

  10. Java框架之spring框架的优点，为什么要学习spring框架

    为什么要学习Spring的框架a: 方便解耦,简化开发    Spring就是一个大工厂,可以将所有对象创建和依赖关系维护,交给Spring管理 b:AOP编程的支持      Spring提供面向切 ...