理解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，就會出現一些神奇的問題，有時候滾的對有時候又不對-_-!

如有不同觀點歡迎在評論區指出！！