最近開發(fā)的app中有一個(gè)選擇車型的組件,字母索引定位功能绘面,自己用 SectionList 做蹭秋,其中涉及到react-native中SectionList源碼修改問題凿将;
注意:本文使用的RN版本為0.55版本腾夯,效果圖如下:
點(diǎn)擊右側(cè)字母導(dǎo)航省撑,SectionList滾動到對應(yīng)的節(jié)點(diǎn)上,這里主要計(jì)算滾動的偏移量俯在,比如我點(diǎn)擊了第一個(gè)字母,就需要偏移一個(gè)字母的所有數(shù)據(jù)(item)娃惯、節(jié)點(diǎn)頭部(renderSectionHeader)和分割線的總高度跷乐,移除類推。
修改SectionList源碼趾浅,添加scrollToOffset方法愕提,注意:SectionList這個(gè)列表組件并沒有scrollToOffset方法(直接使用會報(bào)錯:找不到scrollToOffset方法);FlatList中才有皿哨,包括scrollToIndex和scrollToEnd也是一樣
所以浅侨,需要參照FlatList里面的scrollToOffset方法,給SectionList這個(gè)列表組件手動添加scrollToOffset方法证膨。
第一步:其中SectionList的路徑為:node_modules/react-native/Libraries/Lists/SectionList.js,代碼格式化后大概在343行的位置如输,修改如下:
//添加scrollToOffset方法
? scrollToOffset(params: {animated?: ?boolean, offset: number}) {
? ? ? if (this._wrapperListRef) {
? ? ? ? ? this._wrapperListRef.scrollToOffset(params);
? ? ? }
? }
即:
第二步:同時(shí)還需要修改VirtualizedSectionList的代碼,路徑在node_modules/react-native/Libraries/Lists/VirtualizedSectionList.js央勒,大概381行處修改如下:
//添加scrollToOffset方法
? scrollToOffset(params: {animated?: ?boolean, offset: number}) {
? ? ? if (this._listRef) {
? ? ? ? ? this._listRef.scrollToOffset(params);
? ? ? }
? }
即:
注意不见,那個(gè) ref 變量的名稱在不同的RN版本中可能不一樣,請參照其余地方使用即可崔步!