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

问题

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

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

原因

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

解决

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏无原型不设计

Mockplus:如何调整图标的大小和方向?

使用属性面板上的大小设置,可以很方便地调节图标大小。 ? 调整方向还是通过属性面板来完成: ? 另外:有些图标调整了大小之后可以用做特别的用途哟,比如 S...

2043
来自专栏腾讯云商业智能分析团队的专栏

普通表格常见设置

表格组件是以表格的形式展现数据的载体,表格可以绑定任意一查询的多个字段。根据是否给字段使用统计函数来区分,可划分为细节数据表格和汇总表格。

1061
来自专栏前端小作坊

iOS 5 Mobile Safari中label的bug

前几天在codepen上看到了不错CSS用法,今天打算在写新博客的时候使用类似的思路:

682
来自专栏河湾欢儿的专栏

选中分享

641
来自专栏coding for love

CSS常用布局实现02-垂直居中

css2.1本身没有提供垂直居中的属性,都是通过一些巧妙的方法来实现,当然,都会有或多或少的缺点。所以,还是那句话,如果不考虑兼容到特定的浏览器,建议使用fle...

731
来自专栏React Native开发圈

React Native 圆形进度条组件

npm i--save react-native-circular-progress

1111
来自专栏极乐技术社区

一斤代码深入理解系列(二):微信小程序样式机制

之前,我已经介绍过在小程序开发中使用WXML来做界面布局,但是WXML只是一个界面的骨架。要让我们的小程序变得精致漂亮高大上起来,就需要一种为其添加样式的机...

1797
来自专栏九彩拼盘的叨叨叨

前端学习 第3周 第2天

592
来自专栏练小习的专栏

css实现未知宽度的正方形需求

今天群里有哥们问了一下,百分比宽度的正方形如何用css实现。其实就是不定宽的正方形如何用css实现。 第一个方法利用图片的等比例缩放,用base64写一个1*1...

2066
来自专栏十月梦想

bootstrap按钮

bootstrap提供了其中按钮样式:默认(.btn-default),主要(.btn-primary),成功(.btn-success),警告(.btn-wa...

896

扫码关注云+社区