位置: 编程技术 - 正文

ReactNative之FlatList的具体使用方法

编辑:rootadmin

推荐整理分享ReactNative之FlatList的具体使用方法,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

之前使用的组件是ListView,当时要添加一个下拉刷新,上拉加载的功能,所以对ListView做了一些封装,但是后来看官方文档,不建议再使用ListView,因为效率问题,做过Android的朋友都知道,Android的ListView如果不自己处理一下,也是有效率问题的。所以官方又推出了FlatList,而且自带上拉下拉的功能。

功能简介

完全跨平台。 支持水平布局模式。 行组件显示或隐藏时可配置回调事件。 支持单独的头部组件。 支持单独的尾部组件。 支持自定义行间分隔线。 支持下拉刷新。 支持上拉加载。 支持跳转到指定行(ScrollToIndex)。

如果需要分组/类/区(section),请使用SectionList(这个我们会在之后的文章中介绍)

使用

FlatList如果只做简单使用也是很简单的,这里我们会分难以程度,逐渐介绍:

直接使用

可以看出跟之前的ListView很像,但是其中少了dataSource,这里,我们只需要传递数据,其它的都交给FlatList处理好了。

属性说明

ItemSeparatorComponent行与行之间的分隔线组件。不会出现在第一行之前和最后一行之后。在这里可以根据需要插入一个view ListEmptyComponent列表为空时渲染该组件。可以是React Component, 也可以是一个render函数, 或者渲染好的element。 ListFooterComponent尾部组件 ListHeaderComponent头部组件 columnWrapperStyle如果设置了多列布局(即将numColumns值设为大于1的整数),则可以额外指定此样式作用在每行容器上。 data为了简化起见,data属性目前只支持普通数组。如果需要使用其他特殊数据结构,例如immutable数组,请直接使用更底层的VirtualizedList组件。 extraData如果有除data以外的数据用在列表中(不论是用在renderItem还是Header或者Footer中),请在此属性中指定。同时此数据在修改时也需要先修改其引用地址(比如先复制到一个新的Object或者数组中),然后再修改其值,否则界面很可能不会刷新。 getItem获取每个Item getItemCount获取Item属相 getItemLayout是一个可选的优化,用于避免动态测量内容尺寸的开销,不过前提是你可以提前知道内容的高度。如果你的行高是固定的getItemLayout用起来就既高效又简单,类似下面这样:getItemLayout={(data, index) => ( {length: 行高, offset: 行高 * index, index} )}注意如果你指定了SeparatorComponent,请把分隔线的尺寸也考虑到offset的计算之中。 horizontal设置为true则变为水平布局模式。 initialNumToRender指定一开始渲染的元素数量,最好刚刚够填满一个屏幕,这样保证了用最短的时间给用户呈现可见的内容。注意这第一批次渲染的元素不会在滑动过程中被卸载,这样是为了保证用户执行返回顶部的操作时,不需要重新渲染首批元素。 initialScrollIndex指定渲染开始的item index keyExtractor此函数用于为给定的item生成一个不重复的key。Key的作用是使React能够区分同类元素的不同个体,以便在刷新时能够确定其变化的位置,减少重新渲染的开销。若不指定此函数,则默认抽取item.key作为key值。若item.key也不存在,则使用数组下标。 legacyImplementation设置为true则使用旧的ListView的实现。 numColumns多列布局只能在非水平模式下使用,即必须是horizontal={false}。此时组件内元素会从左到右从上到下按Z字形排列,类似启用了flexWrap的布局。组件内元素必须是等高的——暂时还无法支持瀑布流布局。 onEndReached当列表被滚动到距离内容最底部不足onEndReachedThreshold的距离时调用。 onEndReachedThreshold决定当距离内容最底部还有多远时触发onEndReached回调。注意此参数是一个比值而非像素单位。比如,0.5表示距离内容最底部的距离为当前列表可见长度的一半时触发。 onRefresh如果设置了此选项,则会在列表头部添加一个标准的RefreshControl控件,以便实现“下拉刷新”的功能。同时你需要正确设置refreshing属性。 onViewableItemsChanged在可见行元素变化时调用。可见范围和变化频率等参数的配置请设置viewabilityconfig属性 refreshing在等待加载新数据时将此属性设为true,列表就会显示出一个正在加载的符号。 renderItem根据行数据data,渲染每一行的组件。这个参照下面的demo viewabilityConfig请参考ViewabilityHelper 的源码来了解具体的配置。

方法

ReactNative之FlatList的具体使用方法

scrollToEnd滚动到底部。如果不设置getItemLayout属性的话,可能会比较卡。

scrollToIndex滚动到指定index的item如果不设置getItemLayout属性的话,无法跳转到当前可视区域以外的位置。

scrollToItem滚动到指定item,如果不设置getItemLayout属性的话,可能会比较卡。

scrollToOffset滚动指定距离

Demo:

效果图:

进阶使用

在这里我准备了一份代码示例:

运行效果如下:

总结

总体来说Flatlist还是比ListView用起来方便的,而且提供的功能更多。

标签: ReactNative之FlatList的具体使用方法

本文链接地址:https://www.jiuchutong.com/biancheng/373290.html 转载请保留说明!

上一篇:ReactNative 之FlatList使用及踩坑封装总结

下一篇:JS组件系列之Gojs组件 前端图形化插件之利器(js组件是什么)

  • 留抵抵欠条件
  • 怎么交税费
  • 什么是税额和计税金额
  • 小规模简易征收计算方法
  • 汇算清缴产生的企业所得税如何做账
  • 个人厂房租赁税率是多少
  • 二手车买卖如何交税
  • 以实物抵债账务协议
  • 劳动竞赛费用在什么科目列支做会计分录?
  • 供应商质量问题告知函
  • 购入固定资产挂帐记其他应付款还是应付账款
  • 固定资产减半征收2%申报如何填增值税纳税申报表
  • 分公司是否可以贷款
  • 企业拆迁补偿款要交哪些税
  • 金税三期房产税更正申报怎么弄
  • 企业自建房是什么意思
  • 2020年购进农产品的扣除率
  • 没有进项开销项发票是虚开发票吗
  • 物业公司要怎么开水电费证明
  • 每年空调的维保费用怎么入账?
  • 2020年运费发票备注栏新规定
  • 月销售额未超过10万的免征税怎么算
  • 将自产产品无偿赠送税务处理
  • windows10命令提示符怎么用
  • 如何断开微软账户与电脑的链接
  • 收益相关的政府补助分录
  • 如何在 Windows 11 上打开 APK 文件
  • 小规模纳税人冲红发票怎么报税
  • php字符转换成数字
  • php判断文件上传类型
  • 报销没有发票如何处理做凭证
  • 哪些发票不能进账
  • 矿业财务好做吗
  • 非合理损耗计入入账成本吗
  • phptoken验证原理
  • 房产税为什么会退税
  • h5与小程序交互
  • java web开发实例大全
  • 已经申报过的个税在哪里查看
  • 汇兑损益计算器
  • 如何网上添加办税员上海
  • 企业净利润率是多少好
  • 哪些合同必须签订书面合同
  • 汇算清缴涉及哪些调整
  • 代订饭店
  • 差额冲账法
  • 软件无形资产摊销年限
  • 净资产包含哪些方面
  • 应收款为负数怎么理解这个概念
  • sql2000错误9003
  • vs2015安装方法
  • 报关单保费率怎么填
  • 中小型企业营业额和从业人数
  • 印花税实际缴纳时计入
  • 收到股东投资款需要交印花税吗
  • 土地增值税纳税申报期限
  • 补交所得税会计处理方法包括
  • 纳税人将购买的货物分配给股东,因该货物购买时已缴纳
  • 下脚料属于什么科目
  • sql语句错误提示
  • win7总是提示激活
  • 搜狗网络
  • WINDOWS SERVER 2008开启桌面主题具体步骤
  • info.exe病毒
  • xp系统纯净版gho
  • win7主要有哪些内容
  • neoCapture.exe - neoCapture是什么进程 有什么用
  • win7开机提示重启怎么办
  • 防火墙ddos攻击防范
  • JavaScript中数组长度的属性
  • 高通平台工具下载
  • itertools.permutations
  • node的全局变量有哪些
  • 基于nodejs的框架
  • 应纳税额减征额账务处理
  • 广东省行业税负率表
  • 贵阳税务官网登录
  • 海南国税局待遇
  • 深圳市保安证办理流程
  • 争议问题
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设