React Native 系列
《逻辑性最强的 React Native 环境搭建与调试》
《ReactNative 开发工具有这一篇足矣》
《解决 React Native unable to load script from assets index.android.bundle on windows》
《React Native App 设置 & Android 版发布》
《史上最易懂——ReactNative 分组列表 SectionList 使用详情及示例详解》
ReactNative 长列表数据组件一共有三个:
ListView 核心组件,数据量大时性能较差,占用内存持续增加,故设计出来 FlatList 组件。
FlatList 用于替代 ListView,支持下拉刷新和上拉加载。
SectionList 高性能的分组列表组件。
本文重点介绍 SectionList,SectionList 支持下面的常用功能:
完全跨平台
支持水平布局模式
行组件显示或隐藏时可配置回调事件
支持单独的头部组件
支持单独的尾部组件
支持自定义行间分隔线
支持下拉刷新
支持上拉加载
属性集合
属性名 |
类型 |
说明 |
sections |
Array |
数据源 |
ItemSeparatorComponent |
|
行与行之间的分隔线组件。不会出现在第一行之前和最后一行之后 |
SectionSeparatorComponent |
ReactClass<any> |
每个 section 之间的分隔组件 |
ListEmptyComponent | ReactClass<any> | React.Element<any> |
列表为空时渲染该组件。可以是 React Component, 也可以是一个 render 函数, 或者渲染好的 element。 |
ListFooterComponent |
|
尾部组件 |
ListHeaderComponent |
|
头部组件 |
columnWrapperStyle |
|
如果设置了多列布局(即将 值设为大于 1 的整数),则可以额外指定此样式作用在每行容器上 |
data |
|
为了简化起见,data 属性目前只支持普通数组。如果需要使用其他特殊数据结构,例如 immutable 数组,请直接使用更底层的 组件 |
extraData |
any |
如果有除 以外的数据用在列表中(不论是用在 还是 Header 或者 Footer 中),请在此属性中指定。同时此数据在修改时也需要先修改其引用地址(比如先复制到一个新的 Object 或者数组中),然后再修改其值,否则界面很可能不会刷新。 |
getItem |
any |
获取控件的绑定数据 |
getItemCount |
any |
获取绑定数据的条数 |
getItemLayout |
|
是一个可选的优化,用于避免动态测量内容尺寸的开销,不过前提是你可以提前知道内容的高度。如果你的行高是固定的, 用起来就既高效又简单,类似下面这样: getItemLayout={(data, index) => ({length: 行高, offset: 行高 * index, index} )} 注意如果你指定了 ,请把分隔线的尺寸也考虑到 offset 的计算之中。 |
horizontal |
|
设置为 true 则变为水平布局模式。 |
initialNumToRender |
number |
指定一开始渲染的元素数量,最好刚刚够填满一个屏幕,这样保证了用最短的时间给用户呈现可见的内容。注意这第一批次渲染的元素不会在滑动过程中被卸载,这样是为了保证用户执行返回顶部的操作时,不需要重新渲染首批元素。 |
keyExtractor |
|
此函数用于为给定的 item 生成一个不重复的 key。Key 的作用是使 React 能够区分同类元素的不同个体,以便在刷新时能够确定其变化的位置,减少重新渲染的开销。若不指定此函数,则默认抽取 作为 key 值。若 也不存在,则使用数组下标。 |
legacyImplementation |
|
设置为 true 则使用旧的 ListView 的实现 |
numColumns |
|
多列布局只能在非水平模式下使用,即必须是 。此时组件内元素会从左到右从上到下按 Z 字形排列,类似启用了 的布局。组件内元素必须是等高的——暂时还无法支持瀑布流布局。 |
onEndReached |
|
当列表被滚动到距离内容最底部不足 的距离时调用 |
onEndReachedThreshold |
number |
决定当距离内容最底部还有多远时触发 回调。注意此参数是一个比值而非像素单位。比如,0.5 表示距离内容最底部的距离为当前列表可见长度的一半时触发 |
onRefresh |
|
如果设置了此选项,则会在列表头部添加一个标准的 控件,以便实现 "下拉刷新" 的功能。同时你需要正确设置 属性 |
onViewableItemsChanged |
|
在可见行元素变化时调用。可见范围和变化频率等参数的配置请设置 属性 |
refreshing |
|
在等待加载新数据时将此属性设为 true,列表就会显示出一个正在加载的符号 |
renderItem |
|
根据行数据 渲染每一行的组件 |
viewabilityConfig |
|
请参考 的源码来了解具体的配置 |
方法集合:
方法名 | 类型 | 说明 |
scrollToEnd |
params?: object |
滚动到底部。如果不设置 属性的话,可能会比较卡 |
scrollToIndex |
params: object |
如果不设置 属性的话,无法跳转到当前可视区域以外的位置。 |
scrollToItem |
params: object |
Requires linear scan through data - use instead if possible. 如果不设置 属性的话,可能会比较卡。 |
scrollToOffset |
params: object |
Scroll to a specific content pixel offset, like a normal . |
recordInteraction |
Tells the list an interaction has occured, which should trigger viewability calculations, e.g. if is true and the user has not scrolled. This is typically called by taps on items or by navigation actions. |
源码:
- 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
来源: http://www.cnblogs.com/vipstone/p/7250625.html