细说react-native中的SectionList
来源:互联网 发布:淘宝休闲斜挎包 编辑:程序博客网 时间:2024/06/06 10:41
1、在说SectionList之前,我们先来讲讲ScrollView、ListView/FlatList和SectionList几者之间的区别?
ScrollView和ListView/FlatList应该如何选择?ScrollView会简单粗暴地把所有子元素一次性全部渲染出来。其原理浅显易懂,使用上自然也最简单。然而这样简单的渲染逻辑自然带来了性能上的不足。想象一下你有一个特别长的列表需要显示,可能有好几屏的高度。创建和渲染那些屏幕以外的JS组件和原生视图,显然对于渲染性能和内存占用都是一种极大的拖累和浪费。
这就是为什么我们还有专门的ListView组件。ListView会惰性渲染子元素,只在它们将要出现在屏幕中时开始渲染。这种惰性渲染逻辑要复杂很多,因而API在使用上也更为繁琐。除非你要渲染的数据特别少,否则你都应该尽量使用ListView,哪怕它们用起来更麻烦。因此,ListView适用于动态加载可能很大(或者概念上无限长的)数据集的情况。
FlatList是0.43版本开始新出的改进版的ListView,性能更优,但可能不够稳定,尚待时间考验。另外FlatList不支持分组,若要分组管理的话,可以选用SectionList.
SectionList高性能的分组(section)列表组件,支持下面这些常用的功能:
完全跨平台。 支持水平布局模式。 行组件显示或隐藏时可配置回调事件。 支持单独的头部组件。 支持单独的尾部组件。 支持自定义行间分隔线。 支持下拉刷新。 支持上拉加载。
如果你的列表不需要分组(section),那么可以使用结构更简单的。个人认为FlatList、SectionList相比于ListView更加简单、易用。
在0.43版本中,如果希望section的头部能够吸顶悬浮,请暂时先使用老版的。下一个版本开始可以支持悬浮的section头部。
2、SectionList常用属性
sections: Array相当于ListView中的数据源,SectionList所需要的数据都是经由sections属性传入,数据类型为Array类型
renderItem: (info: {item: Item, index: number}) => ?React.Element renderItem返回Section中的每个小的的Item。可以通过函数返回Element,函数有一个info参数,参数为JSON形式,参数形式为:{item: Item, index: number}。
renderSectionHeader: (info: {section: SectionT}) => ?React.Element renderSectionHeader返回每个Section的标志性头部,可以通过函数返回Element,函数有一个info参数,参数为JSON形式,参数形式为:{section:{key : number, data : [ Object, Object, …] }}。
refreshing: boolean 是否处于刷新状态。
onRefresh: () => void 通过函数改变refreshing从而控制刷新与否。
ItemSeparatorComponent : ReactClass item之间的分隔线组件。不会出现在第一行之前和最后一行之后。
SectionSeparatorComponent : ReactClass .每个section之间的分隔组件。
ListHeaderComponent : ReactClass SectionList头部组件。
ListFooterComponent : ReactClass SectionList尾部组件。
keyExtractor: (item: Item, index: number) => string 默认情况下每个item都需要提供一个不重复的key属性,因此可以通过keyExtractor函数为每一个item生成一个唯一的key。
onEndReached : (info: {distanceFromEnd: number}) => void 是否到达底部,在默认情况下会有一个默认的distanceFromEnd临界值。可以通过此属性来达到上拉加载的效果。
onEndReachedThreshold number 调用onEndReached之前的临界值,单位是像素。
- -
注意:为了优化内存占用同时保持滑动的流畅,列表内容会在屏幕外异步绘制。这意味着如果用户滑动的速度超过渲染的速度,则会先看到空白的内容。这是为了优化不得不作出的妥协,目前官方也在改进中。
给张图可能容易理解一点:
3、SectionList 小demo(超简易通讯录)实现
代码:
/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';import { AppRegistry, StyleSheet, Text, View, SectionList, Dimensions} from 'react-native';const dimension = Dimensions.get('window')export default class sectionlist extends Component { componentDidMount(){ } _renderSectionHeader(info){ var txt = '第' + info.section.key + '部分'; return( <View><Text key={info.section.key} style={{width:dimension.width,height:52,textAlign: 'center',backgroundColor:'#21c6cd',color:'#fff'}}>{txt}</Text></View> ) } _renderItem(info){ return( <View> <Text key={info.item.title}>{info.item.name}</Text> <Text>{info.item.phone}</Text> </View> ) } _separatorCom(){ return( <View style={{height:4,width:500,backgroundColor:'orange'}}></View> ) } render() { const sections = []; for (let i=0;i<10;i++){ let datas = []; for(let j=0;j<10;j++){ datas.push( { name:'用户'+ i + j, phone:'01234567890' } ); } sections.push({key:i,data:datas}); } return ( <View style={styles.container}> <SectionList renderSectionHeader={this._renderSectionHeader} renderItem={this._renderItem} sections={sections} refreshing={false} onRefresh={()=>{alert("刷新")}} ItemSeparatorComponent={this._separatorCom} SectionSeparatorComponent={()=><View style={{height:20,backgroundColor:'blue'}}></View>} keyExtractor={(item,index)=>("index"+index+item)} onEndReached={(info)=>{alert("到达底部")}} onEndReachedThreshold={0} stickySectionHeadersEnabled={true} ListHeaderComponent={()=><View style={{backgroundColor:'yellow',alignItems: 'center'}}><Text>SectionList简易通讯录</Text></View>} ListFooterComponent={()=><View style={{backgroundColor:'red',alignItems: 'center'}}><Text>SectionList简易通讯录尾部</Text></View>} /> </View> ); }}const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, },});AppRegistry.registerComponent('sectionlist', () => sectionlist);
实现效果(没注重样式,不好看):
- 细说react-native中的SectionList
- React-Native SectionList使用
- react native SectionList 使用详解
- react-native SectionList的使用
- 学习总结 ~ (三)React Native 初学 之 sectionList
- React Native使用SectionList打造城市选择列表,包含分组的跳转
- React-Native新列表组件FlatList和SectionList学习 | | 联动列表实现
- React-Native中的布局
- React Native中的事件
- React-Native 中的ListView
- React-Native 中的生命周期
- React-Native中的Text
- react-native react 中的bind(this)
- React Native中的flexbox布局
- react native中的layoutAnimation组件
- 浅谈react native中的ScrollView
- React Native 中的JSX学习
- React Native中的约束规范
- Java HashMap的扩容
- HDFS的工作机制,HDFS写数据流程,HDFS读数据流程(来自学习资料)
- 27、移动端适配
- HDU
- 《深入理解Java虚拟机》
- 细说react-native中的SectionList
- [算法] 基本图算法:深度优先搜索、广度优先搜索
- 深度学习训练技巧(一)
- Handler源码解析
- java基本类型与包装类型区别
- 深度学习调参技巧(三)
- 从适应区到习惯,再到能力
- USACO-Section1.2 Combination Lock
- 二分