一、问题

RN项目里使用Flatlist组件，上拉刷新item过多时，出现跳屏、闪屏、空白屏等问题。

二、原因

先在render函数里log了一下，发现没有re-render，判断不是网络请求或页面内组件数据变动导致的重复渲染；

然后判断是Flatlist自己的触底监听机制有问题；

最后查到是因为最外层父View没有设置固定height或只设置{flex：1}属性，导致onEndReached不能正确监听事件。

三、解决

1.给最外层父组件一个固定高度{height：‘100%’}；

2.设置onEndReachedThreshold={0.01}，确保滑动到距离底部最后0.01时再调动加载功能即可。

Tips——Flatlist的onEndReached多次触发问题解决的更多相关文章

  1. react-native flatlist 上拉加载onEndReached方法频繁触发的问题

    问题 在写flatlist复用组件时,调用的时候如果父组件是不定高的组件,会造成组件无法显示 如果父组件样式{flex:1},则会出现下拉方法频繁触发或不正常触发的问题(我这里出现的问题是在列表第6个 ...

  2. 关于React Native中FlatList的onEndReached属性频繁调用的一种解决办法

    FlatList组件是RN0.43后引入的组件.作为高性能列表组件,FlatList在ListView的基础上优化了加载性能并简化了渲染过程.不仅如此,该组件还提供了onRefresh和onEndRe ...

  3. angular分页插件tm.pagination二次触发问题解决歪方案

    今天在学习angularjs的分页插件时遇到了一个前端的问题,谷歌浏览器开发者模式调试的时候发现每次点击分页刷新按钮会触发两次后台请求,ajax向后台发送了两次请求,这对于强迫症患者来说是一个比较恶心 ...

  4. DropDownlist数据SelectedIndexChanged触发问题解决

    1.设置DropDownlist的AutoPostBack为True 2.绑定DropDownlist数据时出现了重复项, 在载入数据时保存数据状态应该写在Load事件中的if (!IsPostBac ...

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

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

  6. 对Verilog 初学者比较有用的整理(转自它处)

    *作者: Ian11122840    时间: 2010-9-27 09:04                                                              ...

  7. React Native踩坑之FlatList组件中的onEndReached

    最近在做一个RN项目,有使用到FlatList这样一个RN封装的组件去做上拉加载更多功能,在iOS和Android平台上,总结了以下几个遇到的问题及解决方案 1. 进入页面onReached开始就被触 ...

  8. iphone上click事件不触发的问题解决。

    iphone上click事件不触发的问题解决. //在ID为jsProvince上有这么一个事件: $('body').on('click', '#jsProvince', function(e){ ...

  9. 键盘事件触发的兼容tips

    在firefox中 退格键 enter del tab 这些非字符触发编码为0 然而在Safari3以下 是8

随机推荐

  1. webstorm keymap

    http://www.jetbrains.com/webstorm/documentation/WebStorm_ReferenceCard.pdf

  2. 使用putty连接本地VirtualBox上的centos7 linux主机

    1. 查看linux主机默认ssh端口 因为是使用ssh连接虚拟机上的linux主机的,所以需要查看centos ssh默认端口,一般是22 打开终端 输入cd /etc/ssh/ 查看ssh_con ...

  3. 详述MySQL服务在渗透测试中的利用

    本文作者:i春秋签约作家——Binghe 致力于书写ichunqiu社区历史上最长篇最细致最真实的技术复现文章. 文章目录: MySQL之UDF提权 MySQL之MOF提权 MySQL之常规写启动项提 ...

  4. 匹配img标签的正则表达式

    $preg = '/<img.*?src=[\"|\']?(.*?)[\"|\']?\s.*?>/i';//匹配img标签的正则表达式 preg_match_all($ ...

  5. [As3.0] 获取本机信息

    package { import flash.display.Sprite; import flash.events.Event; import flash.net.NetworkInfo; impo ...

  6. 数据库中"DDL","DML","DCL"

    sql组成:DDL:数据库模式定义语言,关键字:createDML:数据操纵语言,关键字:Insert.delete.updateDCL:数据库控制语言 ,关键字:grant.removeDQL:数据 ...

  7. chrome下uploadify导致页面崩溃

    解决方法在初始化uploadify之前用timeout来延迟加载 $(function(){     setTimeout(function(){         $('#file_upload'). ...

  8. SqlServer内存占用查看

    查看每个数据库对内存的占用 SELECT ISNULL(DB_NAME(DATABASE_ID),'RESOURCEDB') AS DATABASENAME, ,)) AS 'SIZE(MB)' FR ...

  9. 弹幕和回到顶部前端web

    弹幕和回到顶部前端web 弹幕 1.效果演示 2.相关代码 <!DOCTYPE html> <html lang="en"> <head> &l ...

  10. docker 查看拉取镜像源地址

    命令:  cat /etc/docker/de