RN 之 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
  1. SectionSeparatorComponent {highlighted,leadingItem,leandingSection,section,trailingItem}
    段分割组件

    • highlighted 当前行(分割线上面👆的Item)是否是高亮状态
    • leadingItem 当前行分配到的数据源 这里是undefined
    • leandingSection 目前我也没搞明白啥意思 这里是undefined
    • section 当前段分配到的数据源
    • trailingItem 尾段数据
  2. 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'},
    

]
```

  1. stickySectionHeadersEnabled boolean

方法

  • scrollToLocation (params: object) -- {sectionIndex,itemIndex}:代码控制 UI交互跳转到指定位置
  • recordInteraction() 告诉ListView 交互已经发生了
  • flashScrollIndicators()显示指示滚动
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,992评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,212评论 3 388
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,535评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,197评论 1 287
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,310评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,383评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,409评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,191评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,621评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,910评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,084评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,763评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,403评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,083评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,318评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,946评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,967评论 2 351

推荐阅读更多精彩内容

  • 1.ios高性能编程 (1).内层 最小的内层平均值和峰值(2).耗电量 高效的算法和数据结构(3).初始化时...
    欧辰_OSR阅读 29,350评论 8 265
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,644评论 18 139
  • 宁折不弯是一种性格。 宁折不弯是刚烈之火,体现的是原则性。 年轻时...
    冰夫阅读 1,524评论 0 0
  • 好像很久没有这种感觉了 有点像重生,似乎还有点小兴奋。 仿佛裹着虫尸的眼睛重新湛亮,阳光那么暖,世界那么美,世界里...
    real_wqwwwww阅读 162评论 0 0
  • 今天朋友圈到处都是暴雨连连,各种各样的小视频应接不暇,老天似乎伤透了心,断断续续忽大忽小的几乎没怎么停,上午...
    锴博麻麻阅读 73评论 0 1