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

功能简介

FlatList高性能的简单列表组件,支持下面这些常用的功能:

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

如果需要分组/类/区(section),请使用<SectionList>

  1. FlatList和SectionList都是以VirtualizedList为底层实现的,FlatList 更高的灵活性(比如说在使用 immutable data 而不是 普通数组)的时候,你才应该考虑使用VirtualizedList
  2. Vritualization 通过维护一个有限的渲染窗口(其中包含可见的元素),并将渲染窗口之外的元素全部用合适的定长空白空间代替的方式,极大的改善了内存消耗以及在有大量数据情况下的使用性能。这个渲染窗口能响应滚动行为。当一个元素离可视区太远时,它就有一个较低优先级;否则就获得一个较高的优先级。渲染窗口通过这种方式逐步渲染其中的元素(在进行了任何交互之后),以尽量减少出现空白区域的可能性。

属性说明

  1. ItemSeparatorComponent:分割线组件,不会出现在第一行之前和最后一行之后。
  2. ListFooterComponent:结尾组件
  3. ListHeaderComponent:头组件
  4. ListEmptyComponent:列表为空时渲染该组件。可以是React Component, 也可以是一个render函数, 或者渲染好的element。
  5. extraData:如果有除data以外的数据用在列表中(不论是用在renderItem还是Header或者Footer中),请在此属性中指定。同时此数据在修改时也需要先修改其引用地址(比如先复制到一个新的Object或者数组中),然后再修改其值,否则界面很可能不会刷新。
  6. getItem:获取每个Item
  7. getItemCount:获取Item属相
  8. initialNumToRender:指定一开始渲染的元素数量,最好刚刚够填满一个屏幕,这样保证了用最短的时间给用户呈现可见的内容。注意这第一批次渲染的元素不会在滑动过程中被卸载,这样是为了保证用户执行返回顶部的操作时,不需要重新渲染首批元素。
  9. initialScrollIndex:指定渲染开始的item index
  10. keyExtractor:此函数用于为给定的item生成一个不重复的key。Key的作用是使React能够区分同类元素的不同个体,以便在刷新时能够确定其变化的位置,减少重新渲染的开销。若不指定此函数,则默认抽取item.key作为key值。若item.key也不存在,则使用数组下标。
  11. legacyImplementation:设置为true则使用旧的ListView的实现。
  12. numColumns:多列布局只能在非水平模式下使用,即必须是horizontal={false}。此时组件内元素会从左到右从上到下按Z字形排列,类似启用了flexWrap的布局。组件内元素必须是等高的——暂时还无法支持瀑布流布局。
  13. onEndReached:当列表被滚动到距离内容最底部不足onEndReachedThreshold的距离时调用。
  14. onEndReachedThreshold:决定当距离内容最底部还有多远时触发onEndReached回调。注意此参数是一个比值而非像素单位。比如,0.5表示距离内容最底部的距离为当前列表可见长度的一半时触发。
  15. onRefresh:如果设置了此选项,则会在列表头部添加一个标准的RefreshControl控件,以便实现“下拉刷新”的功能。同时你需要正确设置refreshing属性。
  16. onViewableItemsChanged:在可见行元素变化时调用。可见范围和变化频率等参数的配置请设置viewabilityconfig属性.
  17. refreshing:在等待加载新数据时将此属性设为true,列表就会显示出一个正在加载的符号。renderItem:根据行数据data,渲染每一行的组件。
  18. data:列表数据
  19. horizontal:设置为true则变为水平列表,默认false。
  20. columnWrapperStyle:numColumns大于1时,设置每行的样式
  21. getItemLayout:如果我们知道行高可以用此方法节省动态计算行高的开销。
  22. refreshing:是否正在加载数据
  23. onRefresh:设置此属性需要一个标准的 RefreshControl 控件,刷新数据
  24. renderItem:渲染每个组件
  25. onViewableItemsChanged:当一个新的Item渲染或者隐藏 的时候调用此方法。参数:info: {viewableItems: Array, changed: Array} viewableItems:当前可见的Item,changed:渲染或者隐藏的Item。
  26. androidprogressViewOffset?: number :当需要在指定的偏移内显示加载指示器的时候,就可以设置这个值。

 方法

  1. scrollToEnd:滚动到底部。如果不设置getItemLayout属性的话,可能会比较卡。
  2. scrollToIndex:滚动到指定index的item如果不设置getItemLayout属性的话,无法跳转到当前可视区域以外的位置。
  3. scrollToItem:滚动到指定item,如果不设置getItemLayout属性的话,可能会比较卡。
  4. scrollToOffset:滚动指定距离

使用实例

 <FlatList
data={Details}
keyExtractor={(item, index) => index}
renderItem={this.renderRow}
ListEmptyComponent={()=>{return(<Text style={styles.LookMoreStyle}>暂无记录</Text>)}}
// getItemLayout={(data,index)=>(
// {length: AdaptationModel.scaleHeight(46), offset:AdaptationModel.scaleHeight(46) * index, index}
// )}
/>
const styles = StyleSheet.create({
LookMoreStyle: {
height: 32,
width: AppSetting.ScreenWidth,
textAlign: 'center',
fontSize: AdaptationModel.setSpText(12),
paddingTop: 10,
backgroundColor: AppSetting.GRAY
},
}) 

React Native之FlatList的介绍与使用实例的更多相关文章

  1. React Native之TextInput的介绍与使用(富文本封装与使用实例,常用输入框封装与使用实例)

    React Native之TextInput的介绍与使用(富文本封装与使用实例,常用输入框封装与使用实例) TextInput组件介绍 TextInput是一个允许用户在应用中通过键盘输入文本的基本组 ...

  2. [RN] React Native 让 Flatlist 支持 选中多个值,并获取所选择的值

    React Native 让 Flatlist  支持  选中多个值,并获取所选择的值 实现效果如下: 实现代码: import React, {Component} from 'react'; im ...

  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 之FlatList

    1.新建项目 2.因为要用到导航跳转, 所以添加依赖,,这里拷贝这个: "dependencies": { "@types/react": "^16. ...

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

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

  7. React Native——组件FlatList

    属性 添加头部组件 ListHeaderComponent属性用来给FlatList添加头部组件 简单使用: //ES6之前写法 _header = function () { return ( &l ...

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

    FlatList组件是RN0.43后引入的组件.作为高性能列表组件,FlatList在ListView的基础上优化了加载性能并简化了渲染过程.不仅如此,该组件还提供了onRefresh和onEndRe ...

  9. React Native 之FlatList 下拉刷新和上拉加载更多

    接上一篇代码: 只修改了FlatListDemo.js里面的代码 import React, {Fragment,Component} from 'react'; import { SafeAreaV ...

随机推荐

  1. css3 -- 渐变

    1.Firefox中的线性渐变 E{ background-image:-moz-linear-gradient(point or angle , form-stop, color-stop, to- ...

  2. xml与json 介绍

    一.JSON数据格式 1)概念:json是一种网络数据传输格式,有值/对象:{“A”:1,”B”:”2”…}词典:对象的序列:[,,,,,]数组两种数据类型 2)URLWithString 将字符串网 ...

  3. Linq世界走一走

    什么是Linq?它是用来做什么的?怎么用? Linq的优点是不管数据源是什么,都可以统一查询.换言之,它是一种包含一套标准查询操作符的查询语言,可以对多个数据源进行查询 ⑴Linq俗称语言集成查询(L ...

  4. OC数组中文排序

    -(void)sortStudentInfo { if(studentInfoArray && studentInfoArray.count > 0) { for(TWDetai ...

  5. visual studio 自带单元测试demo

    0) 创建类,编写方法类1) 在方法点击鼠标右键,在运行测试(T)和调试测试(D)之间会有一个 <创建单元测试>选项.有则进入2,没有则看1.01.0) 菜单栏 工具-->自定义-- ...

  6. 李洪强iOS面试总结之- FMDB

    n什么是FMDB pFMDB是iOS平台的SQLite数据库框架 pFMDB以OC的方式封装了SQLite的C语言API p nFMDB的优点 p使用起来更加面向对象,省去了很多麻烦.冗余的C语言代码 ...

  7. netperf 而网络性能测量

    本文首先介绍网络性能測量的一些基本概念和方法.然后结合 netperf 工具的使用.详细的讨论怎样測试不同情况下的网络性能. 汤凯 (tangk73@hotmail.com), 2004 年 7 月 ...

  8. CocoaAsyncSocket框架的简单封装

    在iOS开发中使用socket(CFNetwork),一般都是用第三方库AsyncSocket. 参考博客:http://my.oschina.net/worldligang/blog/396881? ...

  9. css3的box-sizing

    给了两个并排带边框的div百分比宽度,假如不用box-sizing,边框的宽度会在行内显示.用box-sizing:border-box,可以去除边框的占位. 浏览器支持IE9以上及火狐.谷歌.Ope ...

  10. 201521123049 《JAVA程序设计》 第11周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业题集多线程 1.互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) ...