react-native SectionList的使用
来源:互联网 发布:红蜘蛛校色仪软件下载 编辑:程序博客网 时间:2024/05/21 15:20
之前facebook发布了高性能的列表组件 Flatlist(可理解为优化后的Listview),后来又增加了一个SectionList。
属于增强版的Flatlist,支持头部悬浮等,如果你的列表不需要分组(section),那么可以使用结构更简单的<FlatList>。
关于FlatList的使用,可参考:react-native flatlist 的进阶使用
而且二者之间有很多通用的属性,本文没有提到的可以去上面的链接查看如何使用。
先看一下SectionList的效果:
那么下面先我们介绍一下ScetionList:
高性能的分组(section)列表组件,支持下面这些常用的功能:
- 完全跨平台。
- 支持水平布局模式。
- 行组件显示或隐藏时可配置回调事件。
- 支持单独的头部组件。
- 支持单独的尾部组件。
- 支持自定义行间分隔线。
- 支持下拉刷新。
- 支持上拉加载。
属性
ItemSeparatorComponent?: ?ReactClass<any>
行与行之间的分隔线组件。不会出现在第一行之前和最后一行之后。 By default, highlighted
, section
, and [leading/trailing][Item/Separator]
props are provided. renderItem
provides separators.highlight
/unhighlight
which will update the highlighted
prop, but you can also add custom props with separators.updateProps
.
ListEmptyComponent?: ?ReactClass<any> | React.Element<any>
Rendered when the list is empty. Can be a React Component Class, a render function, or a rendered element.
ListFooterComponent?: ?ReactClass<any>
尾部组件
ListHeaderComponent?: ?ReactClass<any>
头部组件
SectionSeparatorComponent?: ?ReactClass<any>
Rendered at the top and bottom of each section (note this is different from ItemSeparatorComponent
which is only rendered between items). These are intended to separate sections from the headers above and below and typically have the same highlight response as ItemSeparatorComponent
. Also receives highlighted
, [leading/trailing][Item/Separator]
, and any custom props from separators.updateProps
.
extraData?: any
如果有除data
以外的数据用在列表中(不论是用在renderItem
还是Header或者Footer中),请在此属性中指定。同时此数据在修改时也需要先修改其引用地址(比如先复制到一个新的Object或者数组中),然后再修改其值,否则界面很可能不会刷新。
initialNumToRender: number
指定一开始渲染的元素数量,最好刚刚够填满一个屏幕,这样保证了用最短的时间给用户呈现可见的内容。注意这第一批次渲染的元素不会在滑动过程中被卸载,这样是为了保证用户执行返回顶部的操作时,不需要重新渲染首批元素。
inverted?: ?boolean
翻转滚动方向。实质是将scale变换设置为-1。
keyExtractor: (item: ItemT, index: number) => string
此函数用于为给定的item生成一个不重复的key。Key的作用是使React能够区分同类元素的不同个体,以便在刷新时能够确定其变化的位置,减少重新渲染的开销。若不指定此函数,则默认抽取item.key
作为key值。若item.key
也不存在,则使用数组下标。
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: Item, index: number}) => ?React.Element<any>
Default renderer for every item in every section. Can be over-ridden on a per-section basis.
renderSectionHeader?: ?(info: {section: SectionT}) => ?React.Element<any>
Rendered at the top of each section. These stick to the top of the ScrollView
by default on iOS. See stickySectionHeadersEnabled
.
sections: $ReadOnlyArray<SectionT>
The actual data to render, akin to the data
prop in <FlatList>
.
General shape:
stickySectionHeadersEnabled?: boolean
Makes section headers stick to the top of the screen until the next one pushes it off. Only enabled by default on iOS because that is the platform standard there.
方法
scrollToLocation(params: object)
Scrolls to the item at the specified sectionIndex
and itemIndex
(within the section) positioned in the viewable area such that viewPosition
0 places it at the top (and may be covered by a sticky header), 1 at the bottom, and 0.5 centered in the middle. viewOffset
is a fixed number of pixels to offset the final target position, e.g. to compensate for sticky headers.
Note: cannot scroll to locations outside the render window without specifying the getItemLayout
prop.
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.
flashScrollIndicators()
Displays the scroll indicators momentarily.
以上是rn中文网对于SectionList的介绍,下面我们看一下它的使用:
先看一下官方的事例:
<SectionList renderItem={({item}) => <ListItem title={item.title} />} renderSectionHeader={({section}) => <Header title={section.key} />} sections={[ // 不同section渲染相同类型的子组件 {data: [...], title: ...}, {data: [...], title: ...}, {data: [...], title: ...}, ]}/><SectionList sections={[ // 不同section渲染不同类型的子组件 {data: [...], renderItem: ...}, {data: [...], renderItem: ...}, {data: [...], renderItem: ...}, ]}/>
然后看一下上面图展示出来的代码:
render() { let sections = [ /*{data: [{title: 'a'}, {title: 'a'}, {title: 'a'}, {title: 'a'}], title: '第一个头部'}, {data: [{title: 'a'}, {title: 'a'}], title: '第2个头部'}, {data: [{title: 'a'}], title: '第3个头部'}*/ ]; for (let i = 0; i < 5; i++) { let data = []; for (let j = 0; j < 5; j++) { data.push({title: 'data~~' + j}); } sections.push({data: data, title: 'title' + i}) } return ( <View style={{marginTop: 22}}> <Text>asdasdadadda</Text> <SectionList keyExtractor={this._keyExtractor} sections={sections} renderSectionHeader={({section}) => <Text style={{ height: 50, textAlign: 'center', textAlignVertical: 'center', backgroundColor: 'black', color: 'white', fontSize: 30 }}>{section.title}</Text>} renderItem={this._renderItem} ItemSeparatorComponent={this._itemSeparatorComponent} /> </View> )}
_itemSeparatorComponent() { return ( <View style={{backgroundColor: "#fff", height: 1}}/> )}_renderItem = ({item}) => { return <Text style={{ height: 100, textAlignVertical: 'center', backgroundColor: 'green', color: 'white', fontSize: 15 }}>{item.title}</Text>}_sectionComp = ({section}) => { return <Text style={{ height: 50, textAlign: 'center', textAlignVertical: 'center', backgroundColor: 'black', color: 'white', fontSize: 30 }}>{section.title}</Text>}_keyExtractor = (item, index) => index;
section就是数据源,
然后加载item和每组的头部的时候可以用两种方式: 调用方法或者直接用控件。
renderSectionHeader={({section}) => <Text>{section.title}</Text>}renderItem={this._renderItem}
上面两种方式是可以互换的,但是要注意,调用方法的要用下面的写法:
_renderItem = ({item}) => { return <Text style={{ height: 100, textAlignVertical: 'center', backgroundColor: 'green', color: 'white', fontSize: 15 }}>{item.title}</Text>}
在这个地方把参数传递进去,而控件的话是直接作为属性传递进去的。
SectionList也是支持添加头部,尾部,间隔组件和空列表时要显示的组件的,使用方法和FlatList相同。
可以查看:
react-native flatlist 的进阶使用
- react-native SectionList的使用
- React-Native SectionList使用
- react native SectionList 使用详解
- React Native使用SectionList打造城市选择列表,包含分组的跳转
- 细说react-native中的SectionList
- 学习总结 ~ (三)React Native 初学 之 sectionList
- 【React Native开发】- React Navigation的使用
- 【React native】Webview的使用
- [React Native]StatusBar的使用
- react native ref的使用
- React native Webview的使用
- react-native的简单使用
- react native Linking的使用
- react native navigator 的使用
- React Native FlatList的使用
- react native 定时器的使用
- react native 全局变量的使用
- react-native的使用教程
- 如何解决iphone手机微信浏览器中滑动到页面底部出现黑色背景盖住position:fixed的页面元素的问题?
- 根据IP定位城市名称/经纬度
- mamp pro安装redis扩展 各个 步骤截图
- 计数排序
- hightCharts放大缩小图表时,重新获取数据事件
- react-native SectionList的使用
- 51单片机万能红外遥控学习(通过波形学习)
- 剑指offer重点复习题目
- 区块链与金融IT“联姻”的思路和方案
- UEFI FDF文件格式
- python opencv入门 轮廓特征(18)
- 使用loopView实现滚动单选控件
- 《重装系统后弹出对话框(无法打开这个应用(无法使用内置管理员账户打开xx,请使用其他账户登录,……))》
- 【清明】栈和队列