问题

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

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

原因

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

解决

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

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

react-native flatlist 上拉加载onEndReached方法频繁触发的问题的更多相关文章

  1. AngularJS进阶(三十八)上拉加载问题解决方法

    AngularJS上拉加载问题解决方法 项目中始终存在一个问题:当在搜索栏输入关键词后(见图1),按照既定的业务逻辑应该是服务端接收到请求后,首先返回查询的前7条数据,待客户端出现上拉加载时,继续查找 ...

  2. [RN] React Native 实现 FlatList上拉加载

     FlatList可以利用官方组件 RefreshControl实现下拉刷新功能,但官方没有提供相应的上拉加载的组件,因此在RN中实现上拉加载比下拉刷新要复杂一点. 不过我们仍可以通过FlatList ...

  3. reactnative中FlatList上拉加载更多的解决办法

    项目app中用到了list滚动加载,把List做了下对比发现FlatList比较适合自己的项目,但是在实际运用中 onEndReached方法需要给定 onEndReachedThreshold的高度 ...

  4. RecyclerView下拉刷新上拉加载（二）

    listview下拉刷新上拉加载扩展(一) http://blog.csdn.net/baiyuliang2013/article/details/50252561 listview下拉刷新上拉加载扩 ...

  5. Vue(小案例_vue+axios仿手机app)_上拉加载

    ---恢复内容开始--- 一.前言                                                                                    ...

  6. 上拉加载下拉刷新控件WaterRefreshLoadMoreView

    上拉加载下拉刷新控件WaterRefreshLoadMoreView 效果: 源码: // // SRSlimeView // @author SR // Modified by JunHan on ...

  7. Flutter实战视频-移动电商-20.首页_火爆专区上拉加载效果

    20.首页_火爆专区上拉加载效果 上拉加载的插件比较都.没有一个一枝独秀的 可以自定义酷炫的header和footer 一直在更新 推荐使用这个插件: https://github.com/xuelo ...

  8. vue mint-ui 框架下拉刷新上拉加载组件的使用

    安装 npm i mint-ui -S 然后在main.js中引入 import MintUI from 'mint-ui' import 'mint-ui/lib/style.css' Vue.us ...

  9. 免插件，简单实现上拉加载loading

    上拉加载是前端经常遇到的问题,采用插件往往能够轻松解决,这里介绍一种免插件简单实现上拉加载的方法,参考一下,下面分享一下代码. html <body> <ul> <li& ...

随机推荐

  1. saltstack主机管理项目：计主机管理项目命令分发器（三）

    一.开发目标命令格式如下: 二.目录结构 三.代码注解 01.salt.py 只是一个入口,没干什么事情 #!/usr/bin/env python # -*- coding:utf-8 -*- # ...

  2. Java Web之Cookie、Session

    讲Cookie和Seesion之前,先讲一下HTTP连接其实是无序的,服务器不知道是谁在访问它.现在我们来实现一个简单的邮箱功能. 要求: 1.登录页面登录之后看到收件箱和欢迎我 2.点击收件箱看到几 ...

  3. JN_0004：轻松解码类似eval(function(p,a,c,k,e,d){}))的JavaScript代码

    百度访问统计代码JavaScript源码:红色加粗部分将是要修改的地方.eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"&qu ...

  4. 第四节: Quartz.Net五大构件之Trigger通用用法(常用方法、优先级、与job关联等)

    一. 简介 1. 几个类型: ①:TriggerBuilder:用来创建ITrigger实例 ②:ITrigger:触发器实例 2.常用的几个方法 ①.StartNow:Trigger马上触发. ②. ...

  5. Coursera, Big Data 3, Integration and Processing (week 5)

    Week 5, Big Data Analytics using Spark     Programing in Spark   Spark Core: Programming in Spark us ...

  6. SqlServer 语法

    四.            Ranking 排序与排名是我们最为常用的统计方式,比如对班级的学生根据成员进行排名,或者按照成绩高低把学生划分成若干梯队:比如最好成绩的10名学生属于第一梯队,后10名又 ...

  7. 【译】索引进阶（一）：SQL SERVER索引介绍

      [译注:此文为翻译,由于本人水平所限,疏漏在所难免,欢迎探讨指正]  原文链接:http://www.sqlservercentral.com/articles/Stairway+Series/7 ...

  8. I2C与EEPROM

    一.基本概念 RAM(Random Access Memory)的全名为随机存取记忆体,它相当于PC机上的移动存储,用来存储和保存数据的.它在任何时候都可以读写,RAM 通常是作为操作系统或其他正在运 ...

  9. C#+EntityFramework编程方式详细之Model First

    Model First Model First模式即“模型优先”,这里的模型指的是“ADO.NET Entity Framework Data Model”,此时你的应用并没有设计相关数据库,在VS中 ...

  10. vs2010编译error_code

    C1083 : 现象: xxxxx.cpp clxx:fatal error C1083:无法打开源文件: “..\..\..\..\src\folder1\folder2\folder3\folde ...