react-native FlatList onEndReached一直刷新

最新推荐文章于 2021-12-16 19:38:54 发布

刘同学要努力呀

最新推荐文章于 2021-12-16 19:38:54 发布

阅读量470

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_45575273/article/details/108010883

版权

本文描述了一个关于在使用React Native进行移动端开发时遇到的问题：在FlatList外包裹一层ScrollView导致数据加载异常，每次滚动都会触发额外的数据请求。通过调整组件结构，将ScrollView移除，解决了不必要的重复请求问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我想要做的是到底部了再刷新下拉加载数据，但是用了这个从组件加载了就给我调了两次接口，检查代码后发现自己在FlatList外面套了层ScrollView，把它删了就好了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

刘同学要努力呀

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Flatlist 下拉刷新频繁调用

泡泡堂

10-23

812

最近遇到一个问题，当进入一个列表页面时，需要先自动下拉刷新，已达到刷新数据，我先把 showLoading设置为了true constructor(props) { super(props); this.state={ showLoading:true, dateSource:[], } ...

react native 中FlatList组建上拉加载onEndReached多次触发

wanxue0804的博客

10-20

1460

在开发中经常会遇到长列表、tab选项卡、ScrollView等各种嵌套，各种坑啊有木有今天我遇到的是 tab选项卡里放FlatList长列表，发现每次上拉加载更多的时候onEndReached会执行两次，分页数据每次请求2页，数据也会抖动一下，这肯定不是我想要的。然后百度、google了一下，哟西，原来很多人遇到，貌似是官方bug，具体怎么产生的自行百度或者看官方issues 我也找了很多别人的方法，复制粘贴梭哈一试，NM有个鸟用，闭着眼睛估计不知道从哪梭哈过来的不过万幸的是给提供了四个新方法

参与评论您还未登录，请先登录后发表或查看评论

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

weixin_30807677的博客

03-16

821

问题在写flatlist复用组件时，调用的时候如果父组件是不定高的组件，会造成组件无法显示如果父组件样式{flex：1}，则会出现下拉方法频繁触发或不正常触发的问题（我这里出现的问题是在列表第6个项目在底部时，缓慢上拉会多次触发flatlist的onEndReached监听）原因推测是因为{flex：1}不适合做动态高度组件的父组件样式，会错误的判断高度导致onEndReache...

React Native FlatList 避免上拉加载多次触发

移动开发技术分享

01-23

4739

1.设置onEndReachedThreshold（决定当距离内容最底部还有多远时触发onEndReached回调。注意此参数是一个比值而非像素单位。比如，0.5表示距离内容最底部的距离为当前列表可见长度的一半时触发。） onEndReachedThreshold={0.2} 亲测添加此属性可以避免出现下拉刷新触发上拉加载的问题。 2.在onMomentumScrollBegin属性中监...

iOS 刷新控件下拉刷新崩溃问题

奋斗吧，少年！

05-23

1657

iOS开发中经常用到下拉刷新从服务器重新获取数据，但是有的时候下拉刷新会崩溃，尤其是正在刷新的时候再刷新一次，主要原因是刷新的时候调用数据源方法的时候，正好和清空原来原来数据的地方冲突了，导致数组里面的内容为空，才出现的。原来的刷新方法如下

RN React Native 使用Flatlist出现的问题

qq_39750926的博客

11-20

1141

因为我们项目需要兼容app端，pc web端以及移动web端，有些代码在移动端的时候没有问题，但是一旦在pc端，就会发现有bug，于是记录一下，pc端的bug原因 1.出现闪屏，一直调用加载更多函数的原因其实闪屏与频繁调用加载函数是一起的，解决了调用加载函数的问题就能解决闪屏问题。 flatlist组件有两个参数onEndReachedThreshold和onEndReached，前者用来判断何时调用endreached函数，通常设置0.1就能符合基本需求了，然后再测试的过程中，发现代码...

react native基于FlatList下拉刷新上拉加载实现代码示例

10-17

总结来说，这个示例展示了如何在React Native中利用`FlatList`组件的`RefreshControl`和`onEndReached`特性来实现下拉刷新和上拉加载的功能，同时也展示了如何根据屏幕尺寸动态计算每页显示的列表项数量，以优化用户...

react-native实现上拉刷新下拉加载

shizhihua11的博客

03-31

998

每次加载十条数据，将加载好的数据放在缓存中 import React, { Component } from 'react'; import { Platform, StyleSheet, Text, View, Image, TextInput, Dimensions, FlatList, NativeModules, ...

基于React Native官方组件FlatList，增加可定制化“下拉刷新”、“下拉加载更多”组件API的新列表组件react-native-refresh-loadmore-flatlist

孟凡涛的博客

09-20

3057

react-native-refresh-loadmore-flatlist 基于React Native官方组件FlatList，增加可定制化“下拉刷新”、“下拉加载更多”组件API的新列表组件，具体实现功能如下：自定义下拉刷新组件API 自定义上拉LoadMore组件API Installation npm install react-native-refresh-loadmore-fl...

ReactNative 基础 - 12 （网络请求 + FlatList，实现触底加载、下拉刷新、回到顶部，多列布局）

欢迎来到猫猫的博客 o_o ，如有问题，欢迎提出改正~

12-16

1426

onEndReached：触底加载 onEndReachedThreshold={0.1} ：触底加载的位置，默认是未显示区域可见高度为50%（0.5） onRefresh：下拉刷新（触发事件时，需要将refreshing设为true，返回数据后修改为false） refreshing：刷新动画的状态，搭配下拉刷新使用 onScroll：监听滚动，传入参数event， event.nativeEvent.contentOffset.y 注意：RN处理事件的方式，经过特殊处理，特...

Tips——Flatlist的onEndReached多次触发问题解决

weixin_33923148的博客

04-26

1503

一、问题 RN项目里使用Flatlist组件，上拉刷新item过多时，出现跳屏、闪屏、空白屏等问题。二、原因先在render函数里log了一下，发现没有re-render，判断不是网络请求或页面内组件数据变动导致的重复渲染；然后判断是Flatlist自己的触底监听机制有问题；最后查到是因为最外层父View没有设置固定height或只设置{flex：1}属性，导致onEndReac...

关于react-native中FlatList的上拉加载更多，下拉刷新

halo1416的博客

07-23

2203

前言：在react-native项目中，列表是非常常见的，并且react-native官方也有提供列表组件FlatList；但是这个组件本身的上拉加载更多，下拉刷新属性是有一定问题的，需要我们字段去控制才能完美的实现。代码实现： ==>> 主要是实现上拉加载更多，下拉刷新功能，可能存在一些其他的自定义组件没有引入 1. 首先，定义一个FlatList列表 <Fla...

关于ReactNative0.56版本Flatlist列表内容跳动的问题

weixin_33676492的博客

01-04

207

Reactnative的版本升级一直是一个工作量比较的大的事情，每次升级都可能伴随着很多的坑。前段时间在升级到0.56版本的时候发现一个问题，在flatlist使用中，加载多页后，列表项内容开始进行上下抖动的乱跳，疯了一样。于是开始上react-native的issues上寻找答案，有通过查看官方的版本升级日志找到了答案：react-native升级日志0.57 在其中看到如下bugFix描述...

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

weixin_33750452的博客

01-28

1376

FlatList组件是RN0.43后引入的组件。作为高性能列表组件，FlatList在ListView的基础上优化了加载性能并简化了渲染过程。不仅如此，该组件还提供了onRefresh和onEndReached属性，用来定义上拉和下拉的功能。然而笔者发现，当FlatList组件的父组件高度不为定值的时候，onEndReached属性调用会出现问题，List并未滑到底部就会被频繁触发，导致功能异常。...

(转)解决RN-FlatList onEndReached 刷新次数频繁问题

IT_luntan的专栏

02-28

3256

项目开发时，使用FlatList 处理加载时，采取多种方式处理后，Android可以正常加载分页显示，ios无法正常加载，会频繁调用onEndReached；现参考文档https://www.jianshu.com/p/79fb4c6b3214解决，Android、ios共同存在的问题； <FlatList style={{flex: 1}} data={ExamHome...

onendreached refresh无限触发

心生于物而死于物

03-06

323

onEndReached={this.loadModeDataMore()}改为onEndReached={()=>this.loadModeDataMore()} ListView中所有设计调用方法到都必须 =>

FlatList不更新（不重新渲染）问题

book_1992的专栏

05-28

7855

问题：修改了state的某个属性后，重新渲染视图的时候发现FlatList并没有更新原帖：https://segmentfault.com/q/1010000009665332给FlatList指定extraData={this.state}属性，是为了保证state.selected变化时，能够正确触发FlatList的更新。如果不指定此属性，则FlatList不会触发更新，因为它是一个Pure...

react-native onEndReached 频繁调用

wangqiuwei07的专栏

06-24

3939

自己封装FlatList 上拉加载的时候，数据比较少的时候onEndReached 频繁调用，直到加载完所有数据，，按照这篇文章FlatList上拉加载写了一个发现了问题，如果数据比较少，不能满屏的话，onEndReached 就会频繁调用，也有人说是应该用这种方式绑定 this.onEndReached.bind(this)， onEndReached：当所有的数据都已经渲染过，并且列...

React Native 项目FlatList上拉加载函数onEndReached调用两次的解决办法

JR的博客

03-26

2350

问题描述：在使用FlatList做上拉加载数据的时候，发现onEndReached总是会同时调用两次，据说这个FlatList一个bug。解决办法：使用 lodash 避免短时间内重复调用同一个函数第一步：需要导入 import * as _ from 'lodash'; 第二步：在构造方法中做如下配置，其中getMoreData是上拉加载要调用的函数 constructor(pro...

React Native使用FlatList实现下拉刷新与上拉加载

“React Native基于FlatList的下拉刷新与上拉加载实现代码示例” 在React Native开发中，FlatList组件是一个高效的列表渲染工具，它支持下拉刷新和上拉加载功能，使得用户可以轻松地浏览长列表内容。本示例主要讲解...