ReactNative进阶（三十七）：应用 SectionList 实现分组列表_react native sectionlist 分组滑动选中

2401_84446963

于 2024-05-16 01:08:54 发布

阅读量263

点赞数 5

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84446963/article/details/138930333

版权

程序员专栏收录该内容

156 篇文章 0 订阅

订阅专栏

TCP协议

TCP 和 UDP 的区别？
TCP 三次握手的过程？
为什么是三次而不是两次、四次？
三次握手过程中可以携带数据么？
说说 TCP 四次挥手的过程
为什么是四次挥手而不是三次？
半连接队列和 SYN Flood 攻击的关系
如何应对 SYN Flood 攻击？
介绍一下 TCP 报文头部的字段
TCP 快速打开的原理(TFO)
说说TCP报文中时间戳的作用？
TCP 的超时重传时间是如何计算的？
TCP 的流量控制
TCP 的拥塞控制
说说 Nagle 算法和延迟确认？
如何理解 TCP 的 keep-alive？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

浏览器篇

浏览器缓存?
说一说浏览器的本地存储？各自优劣如何？
说一说从输入URL到页面呈现发生了什么？
谈谈你对重绘和回流的理解
XSS攻击
CSRF攻击
HTTPS为什么让数据传输更安全？
实现事件的防抖和节流？
实现图片懒加载？

文章目录

- 一、SectionList 简述

在这里插入图片描述

一、SectionList 简述

ReactNative长列表数据组件一共有三个：

ListView 核心组件，数据量大时性能较差，占用内存持续增加，故诞生FlatList组件。
FlatList 用于替代 ListView，支持下拉刷新和上拉加载。
SectionList 高性能的分组列表组件。

其中，SectionList支持下面的常用功能：

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

1.1 属性集合

属性名（类型）	说明
`sections` （`Array`）	数据源
`ItemSeparatorComponent` （`ReactClass<any>`）	行与行之间的分隔线组件。不会出现在第一行之前和最后一行之后
`SectionSeparatorComponent` （`ReactClass<any>`）	每个section之间的分隔组件
`ListEmptyComponent` （`ReactClass<any> or React.Element<any>`）	列表为空时渲染该组件。可以是React Component, 也可以是一个render函数，或者渲染好的element。
`ListFooterComponent` （`ReactClass<any>`）	尾部组件
`ListHeaderComponent` （`ReactClass<any>`）	头部组件
`data` （`Array<ItemT>`）	为了简化起见，data属性目前只支持普通数组。如果需要使用其他特殊数据结构，例如`immutable`数组，请直接使用更底层的`VirtualizedList`组件
`extraData` （`any`）	如果有除data以外的数据用在列表中（不论是用在renderItem还是Header或者Footer中），请在此属性中指定。同时此数据在修改时也需要先修改其引用地址（比如先复制到一个新的Object或者数组中），然后再修改其值，否则界面很可能不会刷新。
`getItem` （`any`）	获取控件的绑定数据
`getItemCount` （`any`）	获取绑定数据的条数
`getItemLayout` （`(data: ?Array<ItemT>, index: number) => {length: number, offset: number, index: number}`）	getItemLayout是一个可选的优化，用于避免动态测量内容尺寸的开销，不过前提是你可以提前知道内容的高度。如果你的行高是固定的，getItemLayout用起来就既高效又简单，类似这样：`getItemLayout={(data, index) => ( {length: 行高, offset: 行高 * index, index} )}`注意如果你指定了SeparatorComponent，请把分隔线的尺寸也考虑到offset的计算之中。
`initialNumToRender` （`number`）	指定一开始渲染的元素数量，最好刚刚够填满一个屏幕，这样保证了用最短的时间给用户呈现可见的内容。注意这第一批次渲染的元素不会在滑动过程中被卸载，这样是为了保证用户执行返回顶部的操作时，不需要重新渲染首批元素。
`keyExtractor` （`(item: ItemT, index: number) => string`）	此函数用于为给定的item生成一个不重复的key。Key的作用是使React能够区分同类元素的不同个体，以便在刷新时能够确定其变化的位置，减少重新渲染的开销。若不指定此函数，则默认抽取item.key作为key值。若item.key也不存在，则使用数组下标。
`legacyImplementation` （boolean）	设置为true则使用旧的ListView的实现
`onEndReached` （`(info: {distanceFromEnd: number}) => void`）	当列表被滚动到距离内容最底部不足onEndReachedThreshold的距离时调用
`onEndReachedThreshold` （`number`）	决定当距离内容最底部还有多远时触发onEndReached回调。注意此参数是一个比值而非像素单位。比如，0.5表示距离内容最底部的距离为当前列表可见长度的一半时触发
`onRefresh` （`void`）	如果设置了此选项，则会在列表头部添加一个标准的RefreshControl控件，以便实现“下拉刷新”的功能。同时你需要正确设置refreshing属性
onViewableItemsChanged （`(info: {viewableItems: Array<ViewToken>, changed: Array<ViewToken>}) => void`）	在可见行元素变化时调用。可见范围和变化频率等参数的配置请设置viewabilityconfig属性
`refreshing` （boolean）	在等待加载新数据时将此属性设为true，列表就会显示出一个正在加载的符号
`renderItem` （`(info: {item: ItemT, index: number}) => ?React.Element<any>`）	根据行数据data渲染每一行的组件

1.2 方法集合

方法名	说明
`scrollToLocation`	将可视区内位于特定sectionIndex 或 itemIndex (section内)位置的列表项，滚动到可视区的制定位置。比如说，viewPosition 为0时将这个列表项滚动到可视区顶部 (可能会被顶部粘接的header覆盖), 为1时将它滚动到可视区底部, 为0.5时将它滚动到可视区中央。viewOffset是一个以像素为单位，到最终位置偏移距离的固定值，比如为了弥补粘接的header所占据的空间。注意: 如果没有设置getItemLayout，就不能滚动到位于外部渲染区的位置。
`recordInteraction`	主动通知列表发生了一个事件，以使列表重新计算可视区域。比如说当waitForInteractions 为 true 并且用户没有滚动列表时，就可以调用这个方法。不过一般来说，当用户点击了一个列表项，或发生了一个导航动作时，我们就可以调用这个方法。
`flashScrollIndicators`	短暂地显示滚动指示器。

二、应用示例

import React, { Component } from 'react';
import {


### 文末

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。



个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

![](https://img-blog.csdnimg.cn/img_convert/3e0d5b0f6a97b823cc1ef22ff1a18191.png)



第二阶段:移动端开发技术

![](https://img-blog.csdnimg.cn/img_convert/fc21db0a800494796dc6408ce1486031.png)

第三阶段:前端常用框架

![](https://img-blog.csdnimg.cn/img_convert/644efd4ddd0f8d43535f1982ec0da6e4.png)



**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

*   推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；

*   大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。



486d4c3ab8389e65ecb71ac0)**

*   推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；

*   大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。

2401_84446963

关注

5
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
ReactNative进阶（三十七）：应用 SectionList 实现分组列表_react native sectionlist 分组滑动选中

【代码】ReactNative进阶（三十七）：应用 SectionList 实现分组列表_react native sectionlist 分组滑动选中。
复制链接

扫一扫