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

  • Z时代
  • 2024-01-10
  • 分类：综合

react

功能简介

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的介绍与使用实例 的全部内容， 来源链接： utcz.com/z/383946.html

回到顶部