位置: 编程技术 - 正文

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组件是什么)

  • 土地增值税怎么计算
  • 核定征收可以不开免税普票吗
  • 劳务成本会计科目
  • 公转法人交税
  • 应收账款的账面价值等于什么
  • 给员工发结婚礼金怎么说
  • 对外支付佣金代扣代缴
  • 陈列费发票属于什么科目
  • 增值税专用发票验票
  • 人工成本如何分摊到服务成本
  • 印花税减半征收会计分录怎么做
  • 税控系统维护费280会计分录
  • 进项票也要缴纳印花税吗
  • 我的初级备考经验怎么写
  • 中期支付内容包括
  • 研发费用的税收政策
  • 笔记本最新windows
  • 出售房产会计账务处理
  • 收到借出款利息会计分录
  • 增值税加计抵减最新政策2022
  • 新办企业税务服务
  • 无生产怎样结转成本费用
  • 购买办公用品发放给各部门使用
  • ps4运行windows
  • Win10专业版网络连接不上
  • linux中tomcat如何启动
  • php制作一个表单
  • 目前光学变焦最大支持多少倍
  • 建筑业开具发票
  • 出口货物退税率为0,是否出口免税
  • 哪家银行理财产品收益率高
  • sesvc.exe是什么进程
  • 结转代销产品成本会计分录
  • mksysb命令
  • 解决安装后软件icon一圈白边问题
  • 公民什么情况纳税
  • 移动列表格
  • javascript原生
  • 学堂在线结课后还能看吗
  • gps定位器怎么开启
  • setdo指令
  • mkv视频制作
  • 调账处理
  • c语言fread函数的用法示例
  • 单位代扣公积金是什么意思
  • 房产原值是含税还是不含税
  • 工资是负数怎么办
  • 小企业一年需要缴纳多少税
  • 成本费用率和成本费用利润率的区别
  • 套期保值和套期图利
  • 季节性生产企业有哪些
  • 企业单位为职工发放哪些福利
  • 研发成功后的产品出售如何处理
  • 工程施工人工费,材料费,机械费占多少比例
  • 公对公转账后对方拒绝开发票
  • 电子承兑到期怎么申请付款
  • 年度的汇算清缴
  • 记账凭证的分类及每类的具体含义是什么
  • mysql7.x单独安装mysql的方法
  • mysql5.7.22安装配置教程
  • xp系统的输入法在哪里设置
  • mac上怎么用ppt
  • win10如何关闭windows安全中心图标
  • win10系统应用
  • 虚拟机命令cd
  • win10无法使用内置管理员账户
  • 远程调试linux
  • opengl读取obj文件
  • div+css网页布局实例
  • perfcurve函数
  • shell编程技巧
  • cocos2d用什么语言开发游戏
  • JS实现的base64加密、md5加密及sha1加密详解
  • 健壮的什么
  • 星球大战与高达的关系
  • js类的实现
  • 物业费增值税税率5%
  • 医生算是公务员吗?
  • 西安税务办税服务厅
  • 电子发票查询官网入口国家税务局重庆电子税务
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设