一、问题

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. MySQL(增删改查补充)

    SQL语句数据行操作补充             create table tb12(                 id int auto_increment primary key,       ...

  2. 一,PHP会话机制---cookie

    1,  什么是会话 会话可简单理解为:用户打开一个浏览器,点击多个超链接,访问服务器多个web资源,然后关闭浏览器,整个过程称之为一个会话. 2,  cookie技术 cookie(小甜饼)是客户端技 ...

  3. 三,memcached服务的两种访问方式

    memcached有两种访问方式,分别是使用telnet访问和使用php访问. 1,使用telnet访问memcacehd 在命令提示行输入, (1)连接memcached指令:telnet 127. ...

  4. Codeforces Round #439 (Div. 2) A B C

    强哉qls,这场div2竟是其出的!!! A. The Artful Expedient 暴力 ^ ,判断是否出现,有大佬根据亦或的性质推出 Karen 必赢,太强啦23333333333333. # ...

  5. 使用request.js代理post失败的问题

    前面写过一篇使用request.js做代理的文章,可能眼睛敏锐的朋友已经看出在代理POST方法时和代理其它请求方式是有区别的, 现在我来说一下为什么要这么处理. 相信很多人都采用这种方式去代理POST ...

  6. RPC理解

    RPC,英文名称Remote Procedure Call Protocol,即远程过程通讯协议. 可以设想一种情况,有一个人,叫A,A想要翻开一本书,非常简单,让大脑控制自己两只手,轻易就可以看到书 ...

  7. js之作用域

    1.什么是作用域 作用域是用于收集存储维护变量,以及当前执行代码声明的变量所拥有的权限, 例如 : function foo(a){ console.log(a); --------    1    ...

  8. WebDriverAPI(2)

    操作浏览器窗口 被测网址http:http://www.baidu.com Java语言版本的API实例代码 String url = "http://www.baidu.com" ...

  9. Java虚拟机的内存组成

    查了诸多的地方看到的都是这样一句话,我也Copy过来. 按照官方的说法:"Java 虚拟机具有一个堆,堆是运行时数据区域,所有类实例和数组的内存均从此处分配.堆是在 Java 虚拟机启动时创 ...

  10. Java Web入门学习(四)Eclipse与Maven、Tomcat整合配置 (重整版并解决问题)

    Java Web学习(四)Eclipse与Maven整合配置 (重整版) 一.准备工作 1.Tomcat 8.5.15 2.Maven3.5 3.Eclipse Neon.3 Release (4.6 ...