史上最易懂——ReactNative分组列表SectionList使用详情及示例详解-阿里云开发者社区

开发者社区> 嗯哼9925> 正文

史上最易懂——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

ReactClass<any>

行与行之间的分隔线组件。不会出现在第一行之前和最后一行之后

SectionSeparatorComponent 

ReactClass<any>

每个section之间的分隔组件

ListEmptyComponent ReactClass<any> | React.Element<any>

列表为空时渲染该组件。可以是React Component, 也可以是一个render函数, 或者渲染好的element。

ListFooterComponent

ReactClass<any>

尾部组件

ListHeaderComponent

ReactClass<any>

头部组件

columnWrapperStyle

StyleObj

如果设置了多列布局(即将numColumns值设为大于1的整数),则可以额外指定此样式作用在每行容器上

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的计算之中。

horizontal

boolean 

设置为true则变为水平布局模式。

initialNumToRender

number 

指定一开始渲染的元素数量,最好刚刚够填满一个屏幕,这样保证了用最短的时间给用户呈现可见的内容。注意这第一批次渲染的元素不会在滑动过程中被卸载,这样是为了保证用户执行返回顶部的操作时,不需要重新渲染首批元素。

keyExtractor

(item: ItemT, index: number) => string

此函数用于为给定的item生成一个不重复的key。Key的作用是使React能够区分同类元素的不同个体,以便在刷新时能够确定其变化的位置,减少重新渲染的开销。若不指定此函数,则默认抽取item.key作为key值。若item.key也不存在,则使用数组下标。

legacyImplementation

boolean 

设置为true则使用旧的ListView的实现

numColumns

number 

多列布局只能在非水平模式下使用,即必须是horizontal={false}。此时组件内元素会从左到右从上到下按Z字形排列,类似启用了flexWrap的布局。组件内元素必须是等高的——暂时还无法支持瀑布流布局。

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渲染每一行的组件

viewabilityConfig

ViewabilityConfig 

请参考ViewabilityHelper的源码来了解具体的配置

方法集合:

方法名 类型 说明

scrollToEnd

params?: object

滚动到底部。如果不设置getItemLayout属性的话,可能会比较卡

scrollToIndex

params: object

如果不设置getItemLayout属性的话,无法跳转到当前可视区域以外的位置。

scrollToItem

params: object

Requires linear scan through data - use scrollToIndex instead if possible. 如果不设置getItemLayout属性的话,可能会比较卡。

scrollToOffset

params: object

Scroll to a specific content pixel offset, like a normal ScrollView.

recordInteraction

 

Tells the list an interaction has occured, which should trigger viewability calculations, e.g. if waitForInteractions is true and the user has not scrolled. This is typically called by taps on items or by navigation actions.

3、SectionList示例,通讯录实现以及源码

 

源码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
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即可隐藏。







本文转自王磊的博客博客园博客,原文链接:http://www.cnblogs.com/vipstone/p/7250625.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
react native插件 react-navigation使用心得
StackNavigator StackNavigator(screens,configs) const Stack = StackNavigator({ Home: { screen: Home, }, Profile: { screen: Profile } }.
1212 0
.NET数据库编程求索之路--6.使用ADO.NET实现(三层架构篇-使用List传递数据-基于存储过程)(2)
6.使用ADO.NET实现(三层架构篇-使用List传递数据-基于存储过程)(2)      【 夏春涛 email: xchuntao@163.com  blog: http://www.cnblogs.
751 0
oracl使用DataBase Configuration Assistant创建、删除数据库
原文:oracl使用DataBase Configuration Assistant创建、删除数据库可以使用DataBase Configuration Assistant来创建一个心得数据库。Database Configuration Assistant简称是DBCA,是创建、配置以及管理数据库的一个工具。
1212 0
Android Native禁止使用系统私有库详解
解读Android Native对于系统私有库的限制,老版本的黑科技代码在N版本之后都可能导致APP崩溃。
1651 0
Spring Boot参数校验以及分组校验的使用
做web开发基本上每个接口都要对参数进行校验,如果参数比较少,还比较容易处理,一但参数比较多了的话代码中就会出现大量的if-else语句。虽然这种方式简单直接,但会大大降低开发效率和代码可读性。所以我们可以使用validator组件来代替我们进行不必要的coding操作。本文将基于validator的介绍资料,同时结合作者自己在项目中的实际使用经验进行了总结。
3930 0
IOS UIButton使用详解
<p style="margin:10px auto; padding-top:0px; padding-bottom:0px; color:rgb(57,57,57); font-family:verdana,'ms song',Arial,Helvetica,sans-serif; font-size:14px; line-height:21px"> <span style="mar
1155 0
使用xshell连接服务器问题:ssh_exchange_identification: Connection closed by remote host
在连接服务器的时候遇到了如下的问题: 在网上查找方法: 1、让/etc/hosts.allow 和/etc/hosts.
1162 0
+关注
3827
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载