React Native使用SectionList完美实现微信/

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<contentOffset.y+1){
                titleArr.unshift(i.replace(':header',''))
            }
        }
        this.state.sections[titleArr[0]*1]&&this.setState({currentIndex:this.state.sections[titleArr[0]*1].title})
    };
    _renderItem=({item, index, section})=>{
        return (
            <View key={index} style={[{height:HEIGHT},{justifyContent:'center',backgroundColor:'#ffffff',padding:5}]}>
                <Text>
                    {item}
                </Text>
            </View>
        )
    };

    _keyExtractor = (item, index) => index+'';
    /** !important **/
    _getItemLayout=(data, index) => ({length: HEIGHT, offset: HEIGHT * index, index});
    _renderSectionHeader=({ section: { title } })=> <Text style={{ fontWeight: "bold",backgroundColor: '#f2f2f2',padding:5}}>{title}</Text>;
    _ItemSeparatorComponent=()=><View style={{height:1,backgroundColor:'#d4d4d4',marginLeft:5}}/>;

    render(){
        return (
            <View style={{flex:1,justifyContent: 'center',flexDirection: 'row'}}>

                <SectionList
                    ref={'_sectionlist'}
                    style={{backgroundColor:'#ffffff',marginTop:HEIGHT}}
                    stickySectionHeadersEnabled={true}
                    showsVerticalScrollIndicator={false}
                    sections={this.state.sections}
                    onScroll={this._onScroll}
                    renderItem={this._renderItem}
                    keyExtractor={this._keyExtractor}
                    getItemLayout={this._getItemLayout}
                    renderSectionHeader={this._renderSectionHeader}
                    ItemSeparatorComponent={this._ItemSeparatorComponent}
                />

                <View style={{height:'100%',justifyContent:'center'}}
                >
                    {Array.apply(null,Array(26)).map((a,i)=>{
                        return (
                            <View key={i}
                                  hitSlop={{top:10,left:10,bottom:10,right:10}}
                                  onStartShouldSetResponder={()=>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}]}>
                                <Text style={{textAlign: 'center',color:'#007aff'}}>{String.fromCharCode(65+i)}</Text>
                            </View>
                        )
                    })}
                </View>

            </View>
        )
    }

    _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