您的位置：首页 > Web前端 > React

react-native SectionList的使用

2017-08-03 16:25 1906 查看
之前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:
sections: $ReadOnlyArray<{ data: $ReadOnlyArray<SectionItem>, renderItem?: ({item: SectionItem, ...}) => ?React.Element<*>,ItemSeparatorComponent?: ?ReactClass<{highlighted: boolean, ...}>, }>


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 的进阶使用

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航