react-native onEndReached 频繁调用

最新推荐文章于 2022-08-22 10:27:56 发布
最新推荐文章于 2022-08-22 10:27:56 发布
阅读量3.8k 收藏
点赞数
分类专栏： ReactNative
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangqiuwei07/article/details/80791549
版权

自己封装FlatList 上拉加载的时候，数据比较少的时候onEndReached 频繁调用，直到加载完所有数据，，按照这篇文章FlatList上拉加载写了一个发现了问题，如果数据比较少，不能满屏的话，onEndReached 就会频繁调用，
也有人说是应该用这种方式绑定 this.onEndReached.bind(this)，
onEndReached：当所有的数据都已经渲染过，并且列表被滚动到距离最底部不足onEndReachedThreshold个像素的距离时调用。原生的滚动事件会被作为参数传递。译注：当第一次渲染时，如果数据不足一屏（比如初始值是空的），这个事件也会被触发
onEndReachedThreshold：对这个参数一直不太理解

爱谁谁12138
关注
专栏目录
react native 中FlatList组建上拉加载onEndReached多次触发
wanxue0804的博客
10-20 1337
在开发中 经常会遇到长列表、tab选项卡、ScrollView等各种嵌套，各种坑啊有木有 今天我遇到的是 tab选项卡里放FlatList长列表，发现每次上拉加载更多的时候onEndReached会执行两次，分页数据每次请求2页，数据也会抖动一下，这肯定不是我想要的。 然后百度、google了一下，哟西，原来很多人遇到，貌似是官方bug，具体怎么产生的自行百度或者看官方issues 我也找了很多别人的方法，复制粘贴梭哈一试，NM有个鸟用，闭着眼睛估计不知道从哪梭哈过来的 不过万幸的是给提供了四个新方法
React Native踩坑之FlatList组件中的onEndReached
03-24 1078
最近在做一个RN项目，有使用到FlatList这样一个RN封装的组件去做上拉加载更多功能，在iOS和Android平台上，总结了以下几个遇到的问题及解决方案 1. 进入页面onReached开始就被触发 解决方案： // 伪代码如下 <FlatList ... onEndReachedThreshold={0.5} ... />...
react-native flatlist 上拉加载onEndReached方法频繁触发的问题
weixin_30807677的博客
03-16 747
问题 在写flatlist复用组件时，调用的时候如果父组件是不定高的组件，会造成组件无法显示 如果父组件样式{flex：1}，则会出现下拉方法频繁触发或不正常触发的问题（我这里出现的问题是在列表第6个项目在底部时，缓慢上拉会多次触发flatlist的onEndReached监听） 原因 推测是因为{flex：1}不适合做动态高度组件的父组件样式，会错误的判断高度导致onEndReache...
React-native Flatlist/SectionList/ScrollView的onEndReached多次触发问题解决
hzxOnlineOk的博客
05-14 1340
经过博主亲自尝试有效： 一、问题 RN项目里使用Flatlist或者SectionList组件时，组件一加载，就会自行触发多次onEndReached事件。 二、原因 经过调试发现，是因为最外层父View没有设置固定height或只设置{flex：1}属性，导致onEndReached不能正确监听事件。 flex: 1是自动计算高度，这对容器列表组件很不友好，计算会错乱。 三、解决 1.给最外层父组件一个固定高度{height：‘100%’}； 2.设置onEndReachedThresho
React-Native 官方组件FlatLis 关于属性onEndReached、onEndReachedThreshold的几点使用总结
孟凡涛 的博客
09-26 8080
FlatList组件为什么依然这么难用 官方提供的这款List组件相比于上一个版本的ListView来说已经优化很多了，但是，还是不能称之为一个成熟的组件。 onEndReached、onRefresh两个属性的引入说明官方确实是想将下拉刷新、上拉加载的模式引入这个组件，但是从目前的现状来看，这两方面做的都差钱人意，那我们就来对这个组件进行一定的改造，来满足我们正常的开发需求。 上拉加载 我看到很...
react-native-rename：仅用一个命令即可重命名react-native应用
01-30
react-native-rename 只需一个命令即可重命名react-native应用 该软件包假定您使用react-native init创建了react-native项目。 注意：此软件包不会尝试正确重命名构建工件，例如ios/build或Cocoa Pod安装目标。 ...
react-native-iap：应用内购买的react-native本机模块
02-03
最近， react-native-iap模块维护得不好。 我们正在考虑再次参与并使模块更健康。 请参考并与我们分享您或您的组织如何使用它。 新年快乐 :party_popper: 介绍 此本地React模块将帮助您在Android ， iOS平台和Amazon...
react-native-aliplayer:react-native-alilayer
08-05
react-native-aliplayer 阿里云点播播放器 RN 封装,支持多种播放格式,支持 android 和 ios Getting started $ npm install react-native-aliplayer --save Mostly automatic installation $ react-native link react...
react-native-gl-image-filters:使用gl-react的React-Native图像滤镜
05-01
react-native-gl-image-filters 在描述性VDOM范例中，React Native的OpenGL绑定可在图像和组件上实现复杂的效果。 您可以使用预定义的过滤器： 模糊 对比 饱和 亮度 色调 消极的 棕褐色 锐化 温度 接触。 gl-...
react-native-modal-datetime-picker：适用于Android和iOS的React-Native datetime-picker
01-30
$ npm i react-native-modal-datetime-picker @react-native-community/datetimepicker # using yarn $ yarn add react-native-modal-datetime-picker @react-native-community/datetimepicker 请注意， @react-...
Native React Native-双向无限平滑滚动-JavaScript开发
05-26
由react-native提供的FlatList仅允许在一个方向上无限滚动（使用onEndReached）。 该软件包在FlatList的顶部添加了功能，以允许从两个方向进行无限滚动，并且还保持平滑的滚动UX。 :scroll:React Native双向无限滚动[在流上用:heart_suit:构造] FlatList by react-native仅允许在一个方向上无限滚动（使用onEndReached）。 该软件包在FlatList的顶部添加了功能，以允许从两个方向进行无限滚动，并且还保持平滑的滚动UX。 功能接受prop onStartReached和onEndReached，可用于加载更多结果。 已优化对onEndReached和onStartReached的调用。 内联加载指示器，可以是c
ListView组件中 onEndReached 方法在滚动到距离列表最底部一半时执行
weixin_30839881的博客
05-16 423
初次使用ListView,在写列表滚动到最底部自动加载使用到方法onEndReached, 发现: ListView组件中 onEndReached 方法在滚动到距离列表最底部一半时执行, 于是翻看文档解释如下: 当所有的数据都已经渲染过，并且列表被滚动到距离最底部不足onEndReachedThreshold个像素的距离时调用。原生的滚动事件会被作为参数传递。译注：当第一次渲染时，如果数据不足一...
React Native ListView onEndReachedThreshold
weixin_39757238的博客
01-31 460
&lt;ListView dataSource={this.state.dataSource} renderRow={this._renderRow} renderFooter={this._renderFooter} ...
React Native入门（七）之列表组件的使用(2)关于FlatList的一切
苦逼的程序猿☺
07-26 2万+
前言在上一篇博客中了解了列表组件的相关内容，主要是静态的展示了一个列表数据，了解了ScrollVIew，FlatList和SectionList的基本用法，本篇文章就深入的了解一个常用的一个列表组件FlatList的用法！属性添加头部组件ListHeaderComponent属性用来给FlatList添加头部组件 简单使用：//ES6之前写法 _header = function () { r
ReactNative填坑之列表使用，如何做上拉刷新。
qq_41756364的博客
08-09 755
ReactNative填坑之列表使用，如何做上拉刷新。 注意点：FlatList，PullList，触发刷新关键点：onEndReachedThreshold，其中FlatList不是以像素为条件， 思路 当FlatList滑动到底部时，页面数加一，触发请求新一页的网络数据，更新到组件state中的数据源dataArray中，dataArray也作为FlatList的数据源data。实现滑动...
(转)解决RN-FlatList onEndReached 刷新次数频繁问题
IT_luntan的专栏
02-28 3148
项目开发时，使用FlatList 处理加载时，采取多种方式处理后，Android可以正常加载分页显示，ios无法正常加载，会频繁调用onEndReached；现参考文档https://www.jianshu.com/p/79fb4c6b3214解决，Android、ios共同存在的问题； &lt;FlatList style={{flex: 1}} data={ExamHome...
React Native FlatList属性及使用详情
afufufufu的博客
08-22 1035
React Native FlatList属性及使用详情
react native FlatList使用详解以及上拉刷新下拉加载带可运行demo
热门推荐
君无意的博客
06-07 3万+
FlatList 高性能的简单列表组件，支持下面这些常用的功能： 完全跨平台。支持水平布局模式。行组件显示或隐藏时可配置回调事件。支持单独的头部组件。支持单独的尾部组件。支持自定义行间分隔线。支持下拉刷新。支持上拉加载。支持跳转到指定行（ScrollToIndex）。 如果需要分组/类/区（section），请使用。 一个最简单的例子： <FlatList data={[{k
React-native FlatList 组件的下拉刷新onEndReached异常
fchange
01-31 2612
在项目(React-native 0.43版本)中使用FlatList onEndReachedThreshold={20} onEndReached={this._handleLoadMore} /> 遇到不能实现上拉加载更多操作的问题 解决方案 需要将onEndReachedThreshold设置为0-1， 如
react-native link react-native-pdf zsh: command not found: react-native
最新发布
12-29
要解决"zsh: command not found: react-native"的问题，你需要确保已经正确安装了react-native-cli并且已经将其添加到了系统的环境变量中。 以下是在Windows和Mac上安装和配置react-native-cli的步骤： Windows： 1. 打开命令提示符或PowerShell。 2. 运行以下命令来安装react-native-cli： ``` npm install -g react-native-cli ``` 3. 等待安装完成后，你应该能够在命令提示符或PowerShell中使用react-native命令。 Mac： 1. 打开终端。 2. 运行以下命令来安装react-native-cli： ``` sudo npm install -g react-native-cli ``` 输入你的密码以确认安装。 3. 安装完成后，运行以下命令来查找react-native-cli的安装路径： ``` which react-native ``` 记下这个路径，我们称之为路径A。 4. 打开你的bash配置文件（例如：~/.bash_profile、~/.bashrc、~/.zshrc等）。 5. 在文件末尾添加以下行： ``` export PATH="$PATH:路径A" ``` 将路径A替换为你在步骤3中记录的路径。 6. 保存并关闭文件。 7. 在终端中运行以下命令来使配置生效： ``` source ~/.bash_profile ``` 如果你使用的是其他bash配置文件，请相应地修改命令。 完成上述步骤后，你应该能够在终端中使用react-native命令了。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值