FlatList组件是RN0.43后引入的组件。作为高性能列表组件,FlatListListView的基础上优化了加载性能并简化了渲染过程。不仅如此,该组件还提供了onRefreshonEndReached属性,用来定义上拉和下拉的功能。然而笔者发现,当FlatList组件的父组件高度不为定值的时候,onEndReached属性调用会出现问题,List并未滑到底部就会被频繁触发,导致功能异常。通常我们会使用Flexbox弹性盒布局,不会给列表组件设置固定widthheight值,因此出现这种问题很可能是FlatList不能够正确的判断是否到达容器底部。

 <View style={{flex:1}}>
<FlatList data={this.props.data}
renderItem={({item})=>{
return (<MyItem data={item} clickItem={()=>{
this.props.getItem(item);
}}/>);
}}
onEndReached{()=>{
this.props.loadMore();
}}/>
</View>

这种情况下我们可以使用ScrollView的属性手动判断容器底部,因为当我们打开官方关于FlatList组件的介绍(https://facebook.github.io/react-native/docs/flatlist)时,我们发现它继承了ScrollView所有的属性。紧接着,我们找到onScrollonContentSizeChange属性来代替原来的onEndReachedonEndReachedThreshold(IOS)属性。实现如下:

 constructor(props){
super(props);
this.state={
loading:false
}
}
--------------------------以下属性添加到FlatList中--------------------------
onScroll={(event)=>{
let offsetY = event.nativeEvent.contentOffset.y;
let contentHeight = event.nativeEvent.contentSize.height;
let originHeight = event.nativeEvent.layoutMeasurement.height;
if(!this.state.loading){
if(offsetY+originHeight+200>=contentHeight){
this.setState({
loading:true,
});
this.props.loadMore();
}
}
console.log(this.state.loading+","+offsetY);
}}
onContentSizeChange={(contentWidth, contentHeight)=>{
if(this.state.loading){
this.setState({
loading:false,
});
}
}}

其实现原理是

  1. 滑动时获取屏幕高度、FlatList已在竖轴滑动的数值,以及FlatList内容总高度,以此手动判断当前是否到达底部,到达后设置系统“loading”状态,发送载入请求
  2. 当载入请求发送后,会从网络api获取新数据并添加到FlatList中,从而激活onContentSizeChange中定义的函数,将“loading”状态释放。

ps:本解决方案未考虑数据获取失败情况,有需求可自行在onScroll中添加setTimeout进行延迟释放“loading”状态。

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

  1. js实现从字符串中查找出现次数最多的字符的两种解决办法

    方法一:正则表达式匹配 var str = "adadfdfseffserfefsefseeffffftsdg"; ; var result = ""; whi ...

  2. React Native之FlatList的介绍与使用实例

    React Native之FlatList的介绍与使用实例 功能简介 FlatList高性能的简单列表组件,支持下面这些常用的功能: 完全跨平台. 支持水平布局模式. 行组件显示或隐藏时可配置回调事件 ...

  3. [RN] React Native 使用 FlatList 和 ScrollView 的下拉刷新问题

    React Native 使用 FlatList 和 ScrollView 实现 下拉刷新时,RefreshControl 控件不起作用, 后来经查明,原来 RefreshControl 要加在 Sc ...

  4. [RN] React Native 使用 FlatList 实现九宫格布局 GridList

    React Native 使用 FlatList 实现九宫格布局 先看图片演示实例: 本文以图片列表为例,实现九宫格布局! 主要有两种方法: 1)方法一: 利用FlatList的 numColumns ...

  5. [转] 「指尖上的魔法」 - 谈谈 React Native 中的手势

    http://gold.xitu.io/entry/55fa202960b28497519db23f React-Native是一款由Facebook开发并开源的框架,主要卖点是使用JavaScrip ...

  6. [转] 在React Native中使用ART

    http://bbs.reactnative.cn/topic/306/%E5%9C%A8react-native%E4%B8%AD%E4%BD%BF%E7%94%A8art 前半个月捣腾了一下Rea ...

  7. 《React Native 精解与实战》书籍连载「React Native 中的生命周期」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  8. react native中如何往服务器上传网络图片

    let common_url = 'http://192.168.1.1:8080/'; //服务器地址 let token = ''; //用户登陆后返回的token /** * 使用fetch实现 ...

  9. react native中state和ref的使用

    react native中state和ref的使用 因props是只读的,页面中需要交互的情况我们就需要用到state. 一.如何使用state 1:初始化state 第一种方式: construct ...

随机推荐

  1. ECMA Script 6_symbol(symbol.iterator) 新接口_iterator接口

    iterator 接口 只要部署了 iterator 接口 symbol(symbol.iterator), 则可以进行 for...of  遍历

  2. TSL 访问器

    设计原理:GE有一个分布式内存基础设施,成为内存云.内存云由一组内存主干组成.集群中的每台机器承载256个内存中继.我们将一台机器的本地内存空间划分为多个内存中继的原因有两方面:1)中继级别的并行性可 ...

  3. 如何查询注册表的值及 Powershell 应用

    利用 c:\windows\system32\reg.exe 的 query 参数即可. reg.exe 的参数如下: C:\windows\system32> reg.exe /?REG Op ...

  4. 如何在云服务器创建maven私有仓库

    参考链接:https://blog.csdn.net/silence_jjj/article/details/77531916 nexus3创建maven私有仓库(windows) 1.官网:http ...

  5. Enterprise Architect

    Enterprise Architect 是一款计算机辅助软件工程,这款软件用于设计和构建软件系统.业务流程建模及更多通用的建模.EA不同于普通的UML画图工具(如VISIO),它将支撑系统开发的全过 ...

  6. Python 3+selenium+unittest+HTMLTestRunner生成测试报告

    一.下载HTMLTestRunner.py,解压,将它放到 python安装路径的site-packages目录下 https://pan.baidu.com/s/1epWlibxbxWlNoIcxL ...

  7. NOIP2018 游记 QAQ

    写在前面: 本人初三党.NOIP前两个月不好好停课搞信竞愣是要搞文化课.于是,期中考与NOIP一起凉凉[微笑] 本人写的第一篇NOIP游记,各位大佬们随便看一看就好 Day -n 初赛71,竟然跟wx ...

  8. Linux/Windows 应用程序开发

    一.基础知识 虽然写的都是代码,但是代码运行在哪个级别什么位置,还是需要做好定位,这样才心中有数. 1.1 Linux [转载]讲述了中断.系统调用.Linux APIs和Shell的基本知识. 1 ...

  9. if(a)

    let a = undefined; let b = null; let c = ''; let d = ; let e = {}; let f = []; if (a) { console.log( ...

  10. VMware虚拟机共享宿主机硬盘步骤

    1.打开设置 2. 进去设置后,选择选项选项卡,启用文件夹共享,添加文件夹即可 注:虚拟机安装完成后我先装了 VMwareTools,然后进行的共享操作,貌似不安装时无法启用第三步,即 总是启用 按钮 ...