修改SectionList源文件(当前仅供容易配项目使用)

最近开发的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版本中可能不一样,请参照其余地方使用即可!

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容