问题

在写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. 老男孩Python全栈学习 S9 日常作业 001

    1.简述变量命名规范 必须以字母.数字.下划线命名,且不能以数字开头 不能是python的关键字 不能以中文或者拼音作为变量名 命名格式推荐以驼峰式或者下划线连接命名 区分大小写 要有意义,具有可描述 ...

  2. saltstack主机管理项目：主机管理项目架构设计(二)

    1.salt架构图 https://docs.saltstack.com/en/getstarted/system/plugins.html plug-ins(左边):场景可插拔 subsystem- ...

  3. JSON三种数据解析方法（转）

    原 JSON三种数据解析方法 2018年01月15日 13:05:01 zhoujiang2012 阅读数:7896    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blo ...

  4. [再寄小读者之数学篇](2014-06-23 Gronwall-type inequality)

    Suppose that $$\bex \cfrac{\rd f}{\rd t}+h\leq gf\quad (f,g,h\geq 0,\ t\in [0,T]). \eex$$ Then for $ ...

  5. jenkins备份与恢复【转】

    jenkins这里我通过thinbackup插件进行对jenkins的配置备份与恢复 1丶安装thinbackup插件 2丶系统管理选择thinbackup插件 3丶创建备份目录 mkdir /bac ...

  6. java学习教程与笔记

    一个java学习教程:http://www.jikexueyuan.com/path/java/#stage1 集合类学习: java中结合类很多,但用得比较多的一般有三种,当然,其它语言也是,主要是 ...

  7. Innodb和Myisam数据恢复

    (转自)https://www.cnblogs.com/DwyaneTalk/p/4113829.html 背景 这次恢复oracle和sqlserver,想想也不能把mysql落下了吧.三剑合一.都 ...

  8. MUI初学1

    1.1)官网: http://www.dcloud.io/ 2)案例: http://www.dcloud.io/case/#group-1 3)文档:http://dev.dcloud.net.cn ...

  9. WIFI的AP/Sta模式简单介绍

    AP模式: Access Point,提供无线接入服务,允许其它无线设备接入,提供数据访问,一般的无线路由/网桥工作在该模式下.AP和AP之间允许相互连接 Sta模式: Station, 类似于无线终 ...

  10. 十一.keepalived高可用服务实践部署

    期中集群架构-第十一章-keepalived高可用集群章节======================================================================0 ...