美文网首页
scrollToLocation和getItemLayout

scrollToLocation和getItemLayout

作者: 浩神 | 来源:发表于2017-12-31 20:48 被阅读1801次

    React Native中的SectionList组件有scrollToLocation方法,可以传递sectionIndexitemIndexviewOffset进去,达到滚动到sectionList的某一位置之目的。
    例如以下代码可以将sectionList滚动到第三个section的第三个index,并且继续偏移30像素的位置:

    this.sectionList.scrollToLocation({
      sectionIndex: 2,
      itemIndex: 2,
    viewOffset: 30,
    })
    ....
    <SectionList
        ref={ref => this.sectionList = ref}
    />
    

    但是如果要调用scrollToLocation的时候很可能页面还没渲染好,RN并不知道需要滚动到哪个位置,这个时候需要配合getItemLayout来使用。如果在sectionList中使用了该属性,RN会调用此方法计算列表中各项的显示位置,从而提前得知怎么处理滚动。

    <SectionList
    ...
      getItemLayout={(data, index) => ({
        index,
        offset: OFFSET_FROM_TOP,
        length: ITEM_HEIGHT.
        })
      }
    />
    

    getItemLayout接收两个参数: 第一个参数是所有的渲染数据,即传递给sections属性的数据;第二个参数是渲染元素在所有渲染元素中的位置(数组中的索引)。返回一个对象,该对象包含元素索引位置信息(index), offset(该元素距离列表顶部的距离), length(该元素自身的高度)。

    怎么理解index?????

    1. index是某元素在sectionList所有元素中的索引下标,这里所有元素包括:包括sectionHeadersectionFooteritem;
      意味着如果传递给一个SectionList的数据是这样的:
    [{
      title: 'Section 0',
      data: ['item 0-0', 'item0-1', 'item0-2'],
    },
    {
      title: 'Section 1',
      data: ['item 1-0', 'item1-1', 'item1-2'],
    }]
    

    那么index为0的时候应该返回第一个section的sectionHeader位置信息!!!
    index为1的时候,返回第一个section的第一个item的位置信息
    index为4的时候,返回第一个Section的sectionFooter位置信息
    index为6的时候,才是第二个Section的第一个元素的位置信息
    了解了index的含义才能计算好itemLayout。

    在sectionList中计算itemlayout是件很艰难的事情,而且局限于知道列表中各种元素的尺寸的情况下才能计算准确。
    github中有一个库来帮忙做这件事情:
    https://github.com/jsoendermann/rn-section-list-get-item-layout
    这里简要说明以下怎么计算:

    相关文章

      网友评论

          本文标题:scrollToLocation和getItemLayout

          本文链接:https://www.haomeiwen.com/subject/eubagxtx.html