由于项目需求,需要做个单词本并且可跳转的功能。网上找了很久,有用老版本的ListView的,也有说改源码virtualList的,现在用的新版SectionList,是性能较好的，且适合做这种分组滚动跳转的组件。
由于官网上的讲解文档不是很详细,跳转原理刚开始没搞清楚导致浪费了大量的时间研究跳转方法中的参数是什么意思 - -
后面百度到了解了SectionList组件的跳转原理后，做出来了单词本功能～
供大家参考

• 效果图

  
  

  

  单词本.png

  
  

  

  点击字母M后跳转到M.png

1.SectionList中scrollToLocation()和getItemLayout 理解

scrollToLocation(params: object)   =>这是官方文档的解释

将可视区内位于特定`sectionIndex` 或 `itemIndex` (section内)位置的列表项，滚动到可视区的制定位置。
比如说，`viewPosition` 为0时将这个列表项滚动到可视区顶部 (可能会被顶部粘接的header覆盖), 
为1时将它滚动到可视区底部,为0.5时将它滚动到可视区中央。`viewOffset`是一个以像素为单位，
到最终位置偏移距离的固定值，比如为了弥补粘接的header所占据的空间

注意: 如果没有设置`getItemLayout`，就不能滚动到位于外部渲染区的位置。

下面引用会开花的树-通俗易懂的解释。
scrollToLocation方法，可以传递sectionIndex,itemIndex,viewOffset三个参数，达到滚动到SectionList的某一个位置的效果

• studyWordStyles文件样式代码(这里就不把所有代码贴出来啦。values对象的某些值自己修改下就行了)

import {
    Platform,
    StyleSheet,
    Dimensions
} from 'react-native';import * as values from '../../values';const ITEM_HEIGHT = 44; //item的高度const HEADER_HEIGHT = 24;  //分组头部的高度const screenHeight = Dimensions.get('window').height;export default StyleSheet.create({    //单词本
    container: {        flex: 1,        paddingTop: 22,
    },    sectionContainer: {        marginBottom: 50
    },    sectionHeader: {        height: HEADER_HEIGHT,        paddingLeft: 10,        justifyContent: 'center',        backgroundColor: 'rgba(247,247,247,1.0)',
    },    sectionHeaderTxt: {        fontSize: 14,        fontWeight: 'bold',        color: values.color666
    },    sectionItem: {        height: ITEM_HEIGHT,        paddingLeft: 10,        justifyContent: 'center',        borderBottomWidth: values.miniWidth,        borderBottomColor: '#eee',        backgroundColor: '#fff',
    },    //右侧标题
    titleListWrapper: {        position: 'absolute',        height: screenHeight,        top: 0,        right: 10,        display: 'flex',        alignItems: 'center',        justifyContent: 'center',

    },    sectionTitleList: {        paddingVertical: 5
    },    titleText: {        color: values.color666,        textAlign: 'center',        paddingVertical: 1,        width: 20,        fontSize: values.fontSize12
    },    inactivetext: {        fontWeight: '700',        color: '#CCCCCC'
    },    //单词本详情
    wordPan: {        paddingVertical: 20,        paddingHorizontal: 15,        borderBottomWidth: values.miniWidth,        borderBottomColor: '#eee',
    },    wordText: {        fontSize: 30,
    },    wordSoundPan: {        marginTop: 20,        flexDirection: 'row',        alignItems: 'center',
    },    iconSize: {        marginRight: 10,        color: values.sysColorGreen,        fontSize: 20,
    },    soundText: {        color: values.color666,        marginRight: 30,
    },    translationText: {        marginTop: 15,        color: values.color666,
    },    examplePan: {        paddingHorizontal: 15,        paddingVertical: 20,
    },    eTitle: {        fontSize: 20,        marginBottom: 10,
    },    media: {        marginTop: 0,        paddingTop: 10,        paddingBottom: 10,        display: "flex",        flexDirection: "row",
    },    sentenceText: {        marginBottom: 10
    },    translationSentence: {        lineHeight: 20,
    },    addWrapper: {        flexDirection: 'row',        position: 'absolute',        bottom: 0,        left: 0,        width: values.screenWidth,        height: 50,        // backgroundColor: '#000',
        alignItems: 'center',        justifyContent: 'center',        borderTopWidth: values.miniWidth,        borderTopColor: values.colorBg,
    },    addContainer: {        width: values.screenWidth,
    },    mgtl: {        paddingLeft: 10
    }



});

3.最后

总结下...关键的思路就是计算好itemLayout。各个项位置偏移算准了，点击索引跳转的位置才会准确。一个section的索引包含sectionHeader、Item(可能不止一个)、以及sectionFooter。索引从0开始计。主要的方法在2中_setItemLayout (list)中。
有什么意见或者疑问都可以评论哦～
路过的小伙伴们觉得还不错就点个赞吧～

作者：Benny_lzb
链接：https://www.jianshu.com/p/65a6a6d42abc