React Native使用SectionList完美实现微信/iPhone通讯录

import React from 'react'
import {View, Text, SectionList} from 'react-native'

const HEIGHT = 40; // renderItem提前占据高度

export default class extends React.Component {

    state={
        sections:[
            { title: "A", data: ["item1", "item2","item1", "item2","item1", "item2","item1", "item2","item1", "item2","item1", "item2","item1", "item2","item1", "item2"] },
            { title: "B", data: ["item3", "item4"] },
            { title: "C", data: ["item5", "item6"] },
            { title: "D", data: ["item5", "item6"] },
            { title: "E", data: ["item5", "item6"] },
            { title: "F", data: ["item5", "item6"] },
            { title: "G", data: ["item5", "item6"] },
            { title: "H", data: ["item5", "item6"] },
            { title: "I", data: ["item5", "item6"] },
            { title: "J", data: ["item5", "item6"] },
            { title: "K", data: ["item5", "item6"] },
            { title: "X", data: ["item5", "item6"] },
            { title: "Y", data: ["item5", "item6"] },
            { title: "Z", data: ["item5", "item6"] },
        ],
        currentIndex:null
    };


    _onScroll=(event)=>{
        const {_frames} = this.refs._sectionlist._wrapperListRef._listRef;
        const {contentOffset} = event.nativeEvent;
        let titleArr = [];
        for(let i in _frames){
            if(_frames[i].offset{
        return (
            
                
                    {item}
                
            
        )
    };

    _keyExtractor = (item, index) => index+'';
    /** !important **/
    _getItemLayout=(data, index) => ({length: HEIGHT, offset: HEIGHT * index, index});
    _renderSectionHeader=({ section: { title } })=> {title};
    _ItemSeparatorComponent=()=>;

    render(){
        return (
            

                

                
                    {Array.apply(null,Array(26)).map((a,i)=>{
                        return (
                            this._handleScrollTo(String.fromCharCode(65+i))}
                                  style={[this.state.currentIndex===String.fromCharCode(65+i)&&{backgroundColor:'#d4d4d4'},{justifyContent:'center',alignItems:'center',width:17,height:17,borderRadius:8.5}]}>
                                {String.fromCharCode(65+i)}
                            
                        )
                    })}
                

            
        )
    }

    _handleScrollTo=(title)=>{
        let sectionIndex = this.state.sections.findIndex(pre=>{
            return pre.title === title
        });
        if(sectionIndex>-1){
            this.refs._sectionlist.scrollToLocation({sectionIndex: sectionIndex-1,itemIndex:-1})
        }
    }
}

//源码
//https://github.com/facebook/react-native/blob/master/Libraries/Components/ScrollView/ScrollViewStickyHeader.js