史上最易懂——ReactNative分组列表SectionList使用详情及示例详解
React Native系列
《逻辑性最强的React Native环境搭建与调试》
《ReactNative开发工具有这一篇足矣》
《解决React Native unable to load script from assets index.android.bundle on windows》
《React Native App设置&Android版发布》
《史上最易懂——ReactNative分组列表SectionList使用详情及示例详解》
目录
1、SectionList简述
2、SectionList常用属性和方法
3、SectionList示例,通讯录实现以及源码
正文
1、SectionList简述
ReactNative长列表数据组件一共有三个:
ListView 核心组件,数据量大时性能较差,占用内存持续增加,故设计出来FlatList组件。
FlatList 用于替代ListView,支持下拉刷新和上拉加载。
SectionList 高性能的分组列表组件。
本文重点介绍SectionList,SectionList支持下面的常用功能:
完全跨平台
支持水平布局模式
行组件显示或隐藏时可配置回调事件
支持单独的头部组件
支持单独的尾部组件
支持自定义行间分隔线
支持下拉刷新
支持上拉加载
2、SectionList常用属性和方法
属性集合
属性名 |
类型 |
说明 |
sections |
Array |
数据源 |
ItemSeparatorComponent |
|
行与行之间的分隔线组件。不会出现在第一行之前和最后一行之后 |
SectionSeparatorComponent |
ReactClass<any> |
每个section之间的分隔组件 |
ListEmptyComponent | ReactClass<any> | React.Element<any> |
列表为空时渲染该组件。可以是React Component, 也可以是一个render函数, 或者渲染好的element。 |
ListFooterComponent |
|
尾部组件 |
ListHeaderComponent |
|
头部组件 |
data |
|
为了简化起见,data属性目前只支持普通数组。如果需要使用其他特殊数据结构,例如immutable数组,请直接使用更底层的 |
extraData |
any |
如果有除 |
getItem |
any |
获取控件的绑定数据 |
getItemCount |
any |
获取绑定数据的条数 |
getItemLayout |
|
getItemLayout={(data, index) => ( {length: 行高, offset: 行高 * index, index} )} 注意如果你指定了 |
initialNumToRender |
number |
指定一开始渲染的元素数量,最好刚刚够填满一个屏幕,这样保证了用最短的时间给用户呈现可见的内容。注意这第一批次渲染的元素不会在滑动过程中被卸载,这样是为了保证用户执行返回顶部的操作时,不需要重新渲染首批元素。 |
keyExtractor |
|
此函数用于为给定的item生成一个不重复的key。Key的作用是使React能够区分同类元素的不同个体,以便在刷新时能够确定其变化的位置,减少重新渲染的开销。若不指定此函数,则默认抽取 |
legacyImplementation |
|
设置为true则使用旧的ListView的实现 |
onEndReached |
|
当列表被滚动到距离内容最底部不足 |
onEndReachedThreshold |
number |
决定当距离内容最底部还有多远时触发 |
onRefresh |
|
如果设置了此选项,则会在列表头部添加一个标准的 |
onViewableItemsChanged |
|
在可见行元素变化时调用。可见范围和变化频率等参数的配置请设置 |
refreshing |
|
在等待加载新数据时将此属性设为true,列表就会显示出一个正在加载的符号 |
renderItem |
|
根据行数据 |
viewabilityConfig |
|
请参考 |
方法集合:
方法名 | 说明 |
scrollToLocation |
将可视区内位于特定sectionIndex 或 itemIndex (section内)位置的列表项,滚动到可视区的制定位置。比如说,viewPosition 为0时将这个列表项滚动到可视区顶部 (可能会被顶部粘接的header覆盖), 为1时将它滚动到可视区底部, 为0.5时将它滚动到可视区中央。viewOffset是一个以像素为单位,到最终位置偏移距离的固定值,比如为了弥补粘接的header所占据的空间 注意: 如果没有设置getItemLayout,就不能滚动到位于外部渲染区的位置。 |
recordInteraction |
主动通知列表发生了一个事件,以使列表重新计算可视区域。比如说当waitForInteractions 为 true 并且用户没有滚动列表时,就可以调用这个方法。不过一般来说,当用户点击了一个列表项,或发生了一个导航动作时,我们就可以调用这个方法。 |
flashScrollIndicators |
短暂地显示滚动指示器。 |
3、SectionList示例,通讯录实现以及源码
源码:
import React, { Component } from 'react';
import {
AppRegistry,
View,
Text,
SectionList,
} from 'react-native';
class HomeScreen extends React.Component {
constructor(props) {
super(props);
}
_renderItem = (info) => {
var txt = ' ' + info.item.title;
return <Text
style={{ height: 60, textAlignVertical: 'center', backgroundColor: "#ffffff", color: '#5C5C5C', fontSize: 15 }}>{txt}</Text>
}
_sectionComp = (info) => {
var txt = info.section.key;
return <Text
style={{ height: 50, textAlign: 'center', textAlignVertical: 'center', backgroundColor: '#9CEBBC', color: 'white', fontSize: 30 }}>{txt}</Text>
}
render() {
var sections = [
{ key: "A", data: [{ title: "阿童木" }, { title: "阿玛尼" }, { title: "爱多多" }] },
{ key: "B", data: [{ title: "表哥" }, { title: "贝贝" }, { title: "表弟" }, { title: "表姐" }, { title: "表叔" }] },
{ key: "C", data: [{ title: "成吉思汗" }, { title: "超市快递" }] },
{ key: "W", data: [{ title: "王磊" }, { title: "王者荣耀" }, { title: "往事不能回味" },{ title: "王小磊" }, { title: "王中磊" }, { title: "王大磊" }] },
];
return (
<View style={{ flex: 1 }}>
<SectionList
renderSectionHeader={this._sectionComp}
renderItem={this._renderItem}
sections={sections}
ItemSeparatorComponent={() => <View><Text></Text></View>}
ListHeaderComponent={() => <View style={{ backgroundColor: '#25B960', alignItems: 'center', height: 30 }}><Text style={{ fontSize: 18, color: '#ffffff' }}>通讯录</Text></View>}
ListFooterComponent={() => <View style={{ backgroundColor: '#25B960', alignItems: 'center', height: 30 }}><Text style={{ fontSize: 18, color: '#ffffff' }}>通讯录尾部</Text></View>}
/>
</View>
);
}
}
AppRegistry.registerComponent('App', () => HomeScreen);
附源码github地址:https://github.com/vipstone/react-nation-sectionlist
小技巧:如何隐藏header?
static navigationOptions = {header: null};设置header为null即可隐藏。
史上最易懂——ReactNative分组列表SectionList使用详情及示例详解相关推荐
- Vue2.0史上最全入坑教程(中)—— 脚手架代码详解
2019独角兽企业重金招聘Python工程师标准>>> 书接上文我们说道,如何利用脚手架(vue-cli)构建一个vue项目,本回书我们一起来学习分析下代码. 回顾下创建后的项目目录 ...
- 史上最详细Lipreading using Temporal Convolutional Networks(MS-TCN)代码层面详解
本文将从代码层面详细介绍在LRW数据集实现SOTA效果的唇语识别模型MS-TCN.GitHub代码请看Lipreading using Temporal Convolutional Networks, ...
- Java环形队列(史上最易懂)
Java环形队列 史上最易懂 1.什么是队列 2.数组模拟队列 3.Java代码实现 3.1环形队列类 3.2代码测试类 3.3完整Java代码 3.4输出结果 1.什么是队列 队列是一种数据结构,用 ...
- STM32 MQTT协议 连接中国移动OneNet服务器 上传接收数据(二)MQTT协议常用报文详解
STM32 MQTT协议 连接中国移动OneNet服务器 上传接收数据(二)MQTT协议常用报文详解 上一次我们讲了OneNet平台的注册,这次我们来讲一下MQTT的常用报文用法 上一篇地址https ...
- python列表浅复制_Python列表的深复制和浅复制示例详解
一.深复制与浅复制 列表是Python中自带的一种数据结构,在使用列表时,拷贝操作不可避免,下面简单讨论一下列表的深复制(拷贝)与浅复制 首先看代码: l1 = [5, 4, 3, 2, 1] # 用 ...
- python list 深复制_Python列表的深复制和浅复制示例详解
免费资源网,https://freexyz.cn/ 一.深复制与浅复制 列表是Python中自带的一种数据结构,在使用列表时,拷贝操作不可避免,下面简单讨论一下列表的深复制(拷贝)与浅复制 首先看代码 ...
- h5列表 php,H5的标签使用详解
这次给大家带来H5的标签使用详解,使用H5标签的注意事项有哪些,下面就是实战案例,一起来看一下. 不允许写结束标记的标签:area(定义图像映射中的区域).base(为页面上的所有链接规定默认地址或默 ...
- 在linux系统上怎么架设服务器吗,Linux下各种服务器的架设详解
Linux下各种服务器的架设详解 本站整理 发布时间:2009-03-10 12:10:57 作者:jb51.net 我要评论 ########DNS########bind 篇##### ...
- python基础-变量,变量类型,字符串str,元组tuple,列表list,字典dict操作详解(超详细)
python基础--变量 (文章较长,若需要单独看某一个点,可点击目录直接跳转) 文章目录 python基础--变量 1. 变量 2. 变量类型 2.1数字类型 2.2 字符串 2.3 列表 2.4 ...
最新文章
- 三角测量计算三维坐标的代码_浅谈三维扫描仪的由来
- 内行的AI盛会——北京智源大会带你洞见未来!
- 【Android 逆向】Android 逆向通用工具开发 ( Windows 平台运行的控制台应用程序类型 | 编译 Windows 平台运行的 Android 逆向程序 )
- 极市分享|第32期 张德兵小美:分布式人脸识别及工业级运用经验
- 190616每日一句
- 【邮政编码识别】基于matlab灰度二值化邮政编码识别【含Matlab源码 788期】
- Xcode(OC):control reaches end of non-void function
- matlab 转换 地平赤道坐标系,赤道坐标系变为地平坐标系
- 商淘软件多用户商城系统WSTMart v2.0.8程序发布
- windows7隐藏桌面计算机,win7小技巧之隐藏桌面图标
- 【干货】Python文件打包 .exe文件反编译
- Estimator::relativePose
- 智能数据可视化-雷达图的使用方法
- 大学生c语言程序设计具体干什么,大学生c语言程序设计实习报告.doc
- datastage配置oracle,Datastage 8.5 连接远程Oracle 数据库
- 业务流程图模板分享及绘制方法总结
- arguments,callee,caller
- 电机电流采集平台|电流采集
- 非会员如何添加youdao笔记的markdown添加图片
- 家电产品出口指南,RoHs法规详解