SectionList使用scrollToLocation的索引

对于React Native，当数据量很大，ListView性能很差，官方推出了FlatList和SectionList，做了类似iOS中UITableView中cell复用的性能优化。同时推出了getItemLayout和scrollToLocation，官方解释：

getItemLayout是一个可选的优化，用于避免动态测量内容尺寸的开销，不过前提是你可以提前知道内容的高度。如果你的行高是固定的，getItemLayout用起来就既高效又简单，类似下面这样：
getItemLayout={(data, index) => ( {length: 行高, offset: 距当前SectionList顶部的位置, index} )}
注意如果你指定了SeparatorComponent，请把分隔线的尺寸也考虑到offset的计算之中。

scrollToLocation将可视区内位于特定sectionIndex 或 itemIndex (section内)位置的列表项，滚动到可视区的制定位置。比如说，viewPosition为0时将这个列表项滚动到可视区顶部 (可能会被顶部粘接的header覆盖), 为1时将它滚动到可视区底部, 为0.5时将它滚动到可视区中央。viewOffset是一个以像素为单位，到最终位置偏移距离的固定值，比如为了弥补粘接的header所占据的空间
注意: 如果没有设置getItemLayout，就不能滚动到位于外部渲染区的位置。

FlatList还好说，SectionList中因为包含header和footer，在计算索引的时候就出现问题了（官方留的坑），尤其在使用scrollToLocation滚动位置的时候，位置完全是错乱的。经过几次测试，总结出SectionList的index计算方法。

demo代码地址：https://github.com/FlyClouds/WorkBook

比如做个单词本，如图，右侧点击字母列表滚动到指定的位置。

workbookdemo.png

数据如下：

const cell_height = 44; //cell的高度
const header_height = 24;  //分组header的高度
const list = [{
  "title":"A",//header显示
  "data":["apple","accept"]},//cell集合
  {
  "title":"B",
  "data":["base","bottom"]
}]

在使用scrollToLocation的时候，如下，滚动到第一组第一个cell的位置，偏移距离0，也就是单词“accept”的位置。

<SectionList ref={(ref) => { this.sectionList = ref }}  ... />

this.sectionList.scrollToLocation({
    sectionIndex: 0,
    itemIndex: 0, 
    viewOffset: 0, //以像素为单位，到最终位置偏移距离的固定值
    viewPosition:0 //为0时将这个列表项滚动到可视区顶部 , 为1时将它滚动到可视区底部, 为0.5时将它滚动到可视区中央
});

那么在getItemLayout方法中是怎么计算这个index的呢。在sectionList里不管是否有header和footer，它们都要占用一个index位置，比如上面的数据“A”的index为0，“apple”的index为1，“B”的index为4，中间的3被第一组footer占用。我的单词本header和cell的高度是固定的。“A”和“apple”的位置在getItemLayout方法中返回：

//A
{
      index:0,
      length: header_height,
      offset: 0
}
//apple
{
      index:1,
      length: cell_height,
      offset: header_height
}

以此在获取数据后，依次计算出每个index的length和offset值（包含footer占用的index）,在getItemLayout方法中返回对应index的{ index,length: 行高, offset: 距当前SectionList顶部的位置}，计算方法在demo代码里有，scrollToLocation方法中设置sectionIndex和itemIndex只能滚动某一组的某一个cell的位置，不能定位到header的位置，因为我的header高度是固定的，所以定位到“A”的index可以利用viewOffset：

this.sectionList.scrollToLocation({
    sectionIndex: 0,
    itemIndex: 0, 
    viewOffset: header_height, //定位到第一个cell的位置再偏移一个header的高度
});

欢迎大家指教。