SectionListView 属性讲解

SectionListView

属性

1. ItemSeparatorComponent {highlighted,leadingItem,leandingSection,section,trailingItem}
   返回一个行与行之间的分割组件，不会出现在第一行之前和最后一行之后。
   
   • highlighted 当前行（分割线上面��的Item）是否是高亮状态
   • leadingItem 当前行分配到的数据源
   • leandingSection 目前我也没搞明白啥意思 这里是undefined
   • section 当前段分配到的数据源
   • trailingItem 尾段数据
2. ListEmptyCompone 没有接收参数
   渲染一个cell为空时的缓冲组件
3. ListFooterComponent 没有接收参数
   渲染整个组件的Footer
4. ListHeaderComponent 没有接收参数
   渲染整个组件的Header

5. SectionSeparatorComponent {highlighted,leadingItem,leandingSection,section,trailingItem}
   段分割组件

   • highlighted 当前行（分割线上面��的Item）是否是高亮状态
   • leadingItem 当前行分配到的数据源 这里是undefined
   • leandingSection 目前我也没搞明白啥意思 这里是undefined
   • section 当前段分配到的数据源
   • trailingItem 尾段数据

6. extraData
   如果有除data以外的数据用在列表中（不论是用在renderItem还是Header或者Footer中），请在此属性中指定。同时此数据在修改时也需要先修改其引用地址（比如先复制到一个新的Object或者数组中），然后再修改其值，否则界面很可能不会刷新。

文档说的挺乱，总而言之言而总之：sectionList的刷新首先决定于Data，当Data没变化，但是你想强制刷新UI的时候，有个状态控制，那么这个状态控制需要在这里写一下，关联一下，否则你的这个状态不会被关联，UI不会被刷新。

1. initialNumToRender
   指定一开始渲染的item 数量,预加载item 数

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

3. onEndReachedThreshold number
   数值。决定当距离内容最底部还有多远时触发onEndReached回调。注意此参数是一个比值而非像素单位。比如，0.5表示距离内容最底部的距离为当前列表可见长度的一半时触发

4. onEndReached (info: {distanceFromEnd: number}) => void

   传入一个对象info，info包含number类型的distanceFromEnd属性。

5. onViewableItemsChanged (info: {viewableItems: Array<ViewToken>, changed: Array<ViewToken>}) => void

   • viewableItems 可是Item对应的数据
   • changed 改变的数据
     可视元素发生变化时调用

6. refreshing boolean
   等待新数据加载时此属性设置为true，列表会显示出正在加载的符号

7. renderItem (info: {item: Item, index: number}) => ?React.Element<any>
   渲染每一个section中的item
   
   • item 每个item渲染所需数据
   • index item在其section中的位置索引
8. renderSectionHeader?: {section: SectionT}
   接收一个对象，这个对象包含section属性，
   返回一个组件，用作段头

9. 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'},]

10. stickySectionHeadersEnabled boolean

方法

• scrollToLocation (params: object) – {sectionIndex,itemIndex}:代码控制 UI交互跳转到指定位置
• recordInteraction() 告诉ListView 交互已经发生了
• flashScrollIndicators()显示指示滚动