SectionListView
属性
- ItemSeparatorComponent
{highlighted,leadingItem,leandingSection,section,trailingItem}
返回一个行与行之间的分割组件,不会出现在第一行之前和最后一行之后。-
highlighted
当前行(分割线上面👆的Item)是否是高亮状态 -
leadingItem
当前行分配到的数据源 -
leandingSection
目前我也没搞明白啥意思 这里是undefined
-
section
当前段分配到的数据源 -
trailingItem
尾段数据
-
- ListEmptyCompone
没有接收参数
渲染一个cell为空时的缓冲组件 - ListFooterComponent
没有接收参数
渲染整个组件的Footer - ListHeaderComponent
没有接收参数
渲染整个组件的Header
-
SectionSeparatorComponent
{highlighted,leadingItem,leandingSection,section,trailingItem}
段分割组件-
highlighted
当前行(分割线上面👆的Item)是否是高亮状态 -
leadingItem
当前行分配到的数据源 这里是undefined
-
leandingSection
目前我也没搞明白啥意思 这里是undefined
-
section
当前段分配到的数据源 -
trailingItem
尾段数据
-
-
extraData
如果有除data以外的数据用在列表中(不论是用在renderItem还是Header或者Footer中),请在此属性中指定。同时此数据在修改时也需要先修改其引用地址(比如先复制到一个新的Object或者数组中),然后再修改其值,否则界面很可能不会刷新。
文档说的挺乱,总而言之言而总之:sectionList的刷新首先决定于Data,当Data没变化,但是你想强制刷新UI的时候,有个状态控制,那么这个状态控制需要在这里写一下,关联一下,否则你的这个状态不会被关联,UI不会被刷新。
-
initialNumToRender
指定一开始渲染的item 数量,预加载item 数 -
keyExtractor
(item: ItemT, index: number) => string
此函数用于为给定的item生成一个不重复的key。Key的作用是使React能够区分同类元素的不同个体,以便在刷新时能够确定其变化的位置,减少重新渲染的开销。若不指定此函数,则默认抽取item.key作为key值。若item.key也不存在,则使用数组下标。 -
onEndReachedThreshold
number
数值。决定当距离内容最底部还有多远时触发onEndReached回调。注意此参数是一个比值而非像素单位。比如,0.5表示距离内容最底部的距离为当前列表可见长度的一半时触发 -
onEndReached
(info: {distanceFromEnd: number}) => void
传入一个对象info,info包含number类型的
distanceFromEnd
属性。 -
onViewableItemsChanged
(info: {viewableItems: Array<ViewToken>, changed: Array<ViewToken>}) => void
- viewableItems 可是Item对应的数据
- changed 改变的数据
可视元素发生变化时调用
-
refreshing
boolean
等待新数据加载时此属性设置为true,列表会显示出正在加载的符号 -
renderItem
(info: {item: Item, index: number}) => ?React.Element<any>
渲染每一个section中的item- item 每个item渲染所需数据
- index item在其section中的位置索引
-
renderSectionHeader?:
{section: SectionT}
接收一个对象,这个对象包含section
属性,
返回一个组件,用作段头 -
sections
ReadOnlyArray<SectionT>
传入一个sections数组
[ {data:[{name:'nader'},{name:'chris'}],key:'A'}, {data:[{name:'nick'},{name:'amanda'}],key:'B'}, {data:[{name:'nick'},{name:'amanda'}],key:'C'}, {data:[{name:'nick'}],key:'D'},
]
```
- stickySectionHeadersEnabled
boolean
方法
-
scrollToLocation (params: object)
-- {sectionIndex,itemIndex}:代码控制 UI交互跳转到指定位置 -
recordInteraction()
告诉ListView 交互已经发生了 -
flashScrollIndicators()
显示指示滚动
网友评论