最近开发的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版本中可能不一样，请参照其余地方使用即可！
网友评论