最近开发的app中有一个选择车型的组件,字母索引定位功能,自己用 SectionList 做,其中涉及到react-native中SectionList源码修改问题;
注意:本文使用的RN版本为0.55版本,效果图如下:

点击右侧字母导航,SectionList滚动到对应的节点上,这里主要计算滚动的偏移量,比如我点击了第一个字母,就需要偏移一个字母的所有数据(item)、节点头部(renderSectionHeader)和分割线的总高度,移除类推。
修改SectionList源码,添加scrollToOffset方法,注意:SectionList这个列表组件并没有scrollToOffset方法(直接使用会报错:找不到scrollToOffset方法);FlatList中才有,包括scrollToIndex和scrollToEnd也是一样

所以,需要参照FlatList里面的scrollToOffset方法,给SectionList这个列表组件手动添加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);
}
}
即:

第二步:同时还需要修改VirtualizedSectionList的代码,路径在node_modules/react-native/Libraries/Lists/VirtualizedSectionList.js,大概381行处修改如下:
//添加scrollToOffset方法
scrollToOffset(params: {animated?: ?boolean, offset: number}) {
if (this._listRef) {
this._listRef.scrollToOffset(params);
}
}
即:

注意,那个 ref 变量的名称在不同的RN版本中可能不一样,请参照其余地方使用即可!
网友评论