理解RN SectionList scrollToLocation

为什么要写这篇文章

曾使用此属性实现日历的自动滚动，如果在已经渲染好的条件下滚动方法没有一点毛病，但若想滚动到渲染区外就有些坑了，网上不少教程虽都有所提及，但实现的也不是很完美，今天有时间便好好研究一下，写一下自己的理解，希望铁子们能够用到。

RN官网对ScrollToLocation的解释

将可视区内位于特定sectionIndex 或 itemIndex (section内)位置的列表项，滚动到可视区的制定位置。比如说，viewPosition 为0时将这个列表项滚动到可视区顶部 (可能会被顶部粘接的header覆盖), 为1时将它滚动到可视区底部, 为0.5时将它滚动到可视区中央。

注意: 如果没有设置getItemLayout或是onScrollToIndexFailed，就不能滚动到位于外部渲染区的位置。

ScrollToLocation参数理解

this.mySectionList.scrollToLocation(
{animated: true,
 itemIndex: 2, 
 viewOffset:100, 
 sectionIndex: 1});

animated:是否开启滚动动画，true为开启，false为关闭。
sectionIndex:滚动到第几个section，0代表第一个，1代表第二个，以此类推。
itemIndex:滚动到第几个item，这是相对于当前section来表示的，0代表当前section的第一个item，也就是头部组件！！
viewOffset:滚动到第几个section的第几个item后仍需持续偏移的偏移量，正数为向下滚动，负数为向上滚动
例如我写的这个就是为了滚动到第二个section的第三个item上。

getItemLayout 大坑就在这里

getItemLayout={(data, index) => {
                        return {
                            index: index,
                            offset: 150 * (index-(index%5==0?0:1)-parseInt(index/5)) 
                            + 25*(parseInt(index/5)+(index%5==0?0:1)),
                            length: index%5==0 ? 25 : 150,
                        }
                    }}

当sectionList还未渲染完成时调用scrollToLocation必须添加此方法，告诉RN需要滚动到什么位置。

1. 入参data为全部section的数据。
2. 入参index为所有item的角标，就我写的这个小例子来说，0为第一个section的header，1为第一个section的第一个item，5为第二个section的header，以此类推。
3. 返回值中的offset是你要告诉RN当前index需要滚动多少像素，坑就坑在这个计算方式上，还是以上图为例，很明显每个section有5个item，header的高为25，普通item的高为150，所以偏移量应当为前面section里的所有普通item高度和所有头部item高度
4. 返回值length为每个item的高度，要区分头部和普通item高度。

如果未明确算好offest，就会出现一些神奇的问题，有时候滚的对有时候又不对-_-!

如有不同观点欢迎在评论区指出！！