问题

在写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. Git 分支 （二）合并

    分支的新建与合并 让我们来看一个简单的分支新建与分支合并的例子,实际工作中你可能会用到类似的工作流. 你将经历如下步骤:1. 开发某个网站.2. 为实现某个新的需求,创建一个分支.3. 在这个分支上开 ...

  2. [物理学与PDEs]第4章习题3 一维理想反应流体力学方程组的数学结构

    证明: Euler 坐标系下的一维反应流体力学方程组 (3. 10)-(3. 13) 也是一个一阶拟线性双曲型方程组. 证明: 由 (3. 10), (3. 12), (3. 13) 知 $$\bex ...

  3. vue使用md5，base64方法

    在前端加密代码虽然对安全没有提高,但是可以避免明文传输,提供用户隐私保护,还是很有必要的. 首先安装js-md5,js-base64. 在vue中引入. 之后就可以直接使用了,一般的做法是先把密码转行 ...

  4. 拖动DIV

    链接:https://www.cnblogs.com/joyco773/p/6519668.html   移动端:div在手机页面上随意拖动   1 <!doctype html> 2 & ...

  5. visual studio code运行时报错，Cannot find module 'webpack'

    前言 今天运行是visual studio code时,报了一个错误Cannot find module 'webpack' ,网上找了很多方法都没解决.下面一起来看看怎么解决 正文 报错: npm ...

  6. Django logging配置

    1,在项目下建个文件夹    log 2,在django的setting的配置下添加路径     BASE_LOG_DIR = os.path.join(BASE_DIR, "log&quo ...

  7. word20161226

    1. condensed 英[kən'denst]美[kənˈdɛnst]v. (使) 变稠或变浓,浓缩( condense的过去式和过去分词 ); (使) 凝结; 简说,摘要,简述;[例句]The ...

  8. tomcat 优化建议

    下面给出的是tomcat的优化建议,如果不同意见请留言. 上配置: tomcat jmx配置访问:修改catalina.sh CATALINA_OPTS="$CATALINA_OPTS -D ...

  9. zabbix3.2监控mongodb

    模板地址:https://share.zabbix.com/databases/mongodb/mongodb-for-zabbix-3-2 .安装jq依赖 # yum install jq -y . ...

  10. Mysql --创建用户和授权,备份

    权限管理 我们知道我们的最高权限管理者是root用户,它拥有着最高的权限操作.包括select.update.delete.update.grant等操作.那么一般情况在公司之后DBA工程师会创建一个 ...