专栏首页无所事事者爱嘲笑react-native flatlist 上拉加载onEndReached方法频繁触发的问题

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

问题

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

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

原因

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

解决

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

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue中scoped css和css module比较

    mcq
  • react-native run-android时 SDK location not found.报错

    mcq
  • windows上react-native run-android时Exception in thread "main" java.lang.IllegalArgumentException: MALF

    mcq
  • Angular中,父组件向子组件传递 “模版内容引用”

    今天看到文章:https://segmentfault.com/a/1190000015944548 。专门研究一下ngTemplateOutlet用法!!!!

    申君健
  • Vue基础总结2

    提示:遇到的问题:当我们还在页面first的时候,页面second还没生成,也就是页面second中的 created中所监听的来自于first中的事件还没有被...

    用户7386338
  • Taro UI 2.0 发布:新增自定义主题功能,适配更多小程序

    转眼间,Taro UI 发布已有半年,在此期间,不断完善组件库的功能和特性,新增了许多组件和小工具,包括但不限于:

    京东技术
  • 从零开始学 Web 之 Vue.js(六)Vue的组件

    在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!

    Daotin
  • Vue组件开发三板斧:prop、event、slot

    组件,有些可以完全独立运行完全不依赖外部属性,比如层级较高的页面组件。但大多时候,组件还是需要使用方做一些定制操作,并可以在状态变化时通知给使用方,于是,一个组...

    娜姐
  • Vue 组件化开发

      将实现页面某一部分功能的结构、样式和逻辑封装成为一个整体,使其高内聚,低耦合,达到分治与复用的目的。在前端范畴,我们可以用下面的这张图来简单地理解组件化:

    Demo_Null
  • 小程序 Canvas 层级问题

    在使用 canvas 编辑图片,使用添加弹框来自定义添加文字,在微信开发工具上是正常弹窗不会被挡到,到手机上测试,发现弹框一直会在 canvas 组件后面

    前端黑板报

扫码关注云+社区

领取腾讯云代金券