react-native SectionList 使用详解

勤做笔记,方便自己,帮助他人。

属性

  • ScrollView props... 集成了scrollview的属性

  • sections 用来渲染的数据,类似于 FlatList 中的data属性。
    数据格式如下:

[
    { title: 'a', data: ['a1', 'a2'] },
    { title: 'b', data: ['b1', 'b2','b3'] },
    { title: 'c', data: ['c1'] },
]
  • initialNumToRender 指定一开始渲染的元素数量,最好刚刚够填满一个屏幕,这样保证了用最短的时间给用户呈现可见的内容。注意这第一批次渲染的元素不会在滑动过程中被卸载,这样是为了保证用户执行返回顶部的操作时,不需要重新渲染首批元素。

  • keyExtractor 一个不重复的key

  • renderItem 每一个section中的每一个列表项Item(参数名固定)

// item  列表项数据 
// index  列表项在section中的索引
// section  列表项的section索引
// separators:  {
//    highlight',
//    unhighlight,
//    updateProps:{
//        select,
//        newProps,
//    }
// } 
 renderItem={({ item, index, section, separators }) =>
  <View style={styles.itemView}>
    <Text >{item}</Text>
  </View>
}
  • onEndReached 当列表被滚动到距离内容最底部不足onEndReachedThreshold的距离时调用。 一般用来实现加载更多。

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

  • ItemSeparatorComponent 行与行之间的分隔线组件。不会出现在第一行之前和最后一行之后

  • inverted 翻转滚动方向。实质是将scale变换设置为-1。 [boolean]

  • legacyImplementation

  • ListEmptyComponent 当列表数据为空时渲染的组件。

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

  • onRefresh 在列表头部添加一个标准的RefreshControl控件,以便实现“下拉刷新”的功能。同时你需要正确设置refreshing属性。

  • onViewableItemsChanged 在可见行元素变化时调用。可见范围和变化频率等参数的配置请设置viewabilityConfig属性。

  • refreshing 在等待加载新数据时将此属性设为true,列表就会显示出一个正在加载的符号。

  • removeClippedSubviews

  • ListHeaderComponent 头部组件。

  • ListFooterComponent 尾部组件

  • renderSectionHeader 每个section的头部组件。在iOS上,这些headers是默认粘接在ScrollView的顶部的(也可以通过 stickySectionHeadersEnabled 来控制)

  • renderSectionFooter 每个组的尾部组件。

  • SectionSeparatorComponent 类似于ItemSeparatorComponent。 section 之间的间隙

  • stickySectionHeadersEnabled 当下一个section把它的前一个section的可视区推离屏幕的时候,让这个section的header粘连在屏幕的顶端。这个属性在iOS上是默认可用的,因为这是iOS的平台规范。(说白了就是吸顶效果)

方法

  • scrollToLocation 滚动列表到指定的区域(参数名固定)
 /**
     *
     * @param I Item 点击事件传递过来的index
     * 'viewPosition' (number) - 为0时将这个列表项滚动到可视区顶部 
     * (可能会被顶部粘接的header覆盖), 
     * 为1时将它滚动到可视区底部, 为0.5时将它滚动到可视区中央。
     * 'viewOffset' (number) - 继续偏移30像素的位置
     * 'sectionIndex' (number) - 第number个section
     * 'itemIndex' (number) - 的第number个item
     * 'animated' (boolean) -  是否启用动画
     */
    scrollToLocation(i) {
        this.refs.SectionList.scrollToLocation({
            animated : true,
            itemIndex : 0,
            sectionIndex : i,
            viewOffset : 30
        })
    }
  • recordInteraction 主动通知列表发生了一个事件,以使列表重新计算可视区域。比如说当waitForInteractions 为 true 并且用户没有滚动列表时,就可以调用这个方法。不过一般来说,当用户点击了一个列表项,或发生了一个导航动作时,我们就可以调用这个方法。
  • flashScrollIndicators 短暂地显示滚动指示器。
<SectionList
  keyExtractor={(item, index) => item + index}
  ref='SectionList'
  refreshControl={
    <RefreshControl
      refreshing={refreshing}
      onRefresh={this.onRefresh}
      tintColor={[CS.THEME11]}
      colors={[CS.THEME11]}
    />
  }
  refreshing={refreshing}
  sections={list}
  renderItem={({ item }) =>
    <Item
      del={() => this.fetchDel(item)}
      item={item}
      btnPress={() => this.goToSendMsg(item)}
    />
  }
  ListEmptyComponent={<NullPage text={'暂无圈好友'}/>}
  ListHeaderComponent={<Header data={}}/>}
  ListFooterComponent={<View style={{ height: 100 }}/>}
  renderSectionHeader={({ section }) =>
    <View style={{ height: 24 }}>
      <Text style={styles.sectionTitle}>{section.title}</Text>
    </View>
  }
  getItemLayout={this._getItemLayout}
/>

注意:

  • 当某行滑出渲染区域之外后,其Item内部状态将不会保留。
  • 本组件继承自PureComponent而非通常的Component,这意味着如果其props浅比较中是相等的,则不会重新渲染。所以请先检查你的renderItem函数所依赖的props数据(包括data属性以及可能用到的父组件的state),如果是一个引用类型(Object或者数组都是引用类型),则需要先修改其引用地址(比如先复制到一个新的Object或者数组中),然后再修改其值,否则界面很可能不会刷新。
  • 为了保持滑动的流畅,列表内容会在屏幕外异步绘制。所以快速滑动有空白。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 143,736评论 1 303
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 61,631评论 1 258
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 95,145评论 0 213
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 41,213评论 0 181
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 49,025评论 1 259
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 38,893评论 1 178
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 30,497评论 2 273
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,240评论 0 167
  • 想象着我的养父在大火中拼命挣扎,窒息,最后皮肤化为焦炭。我心中就已经是抑制不住地欢快,这就叫做以其人之道,还治其人...
    爱写小说的胖达阅读 29,114评论 6 235
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 32,596评论 0 213
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,363评论 2 215
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 30,717评论 1 232
  • 白月光回国,霸总把我这个替身辞退。还一脸阴沉的警告我。[不要出现在思思面前, 不然我有一百种方法让你生不如死。]我...
    爱写小说的胖达阅读 24,279评论 0 32
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,183评论 2 214
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 31,629评论 3 209
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,647评论 0 9
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,047评论 0 167
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 33,625评论 2 232
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 33,734评论 2 236

推荐阅读更多精彩内容