效果图：
最近自己研究了下react native里的sectionlist组件，写了一个类似通讯录功能的三方库组件react-native-sectionlist-contacts，包含了点击右边的索引进行对应的跳转，下面就阐述下这个组件的原理和使用步骤以及当中遇到的问题。
代码原理
根据react native的sectionlist文档，需要传入一个数组类型的数据源给sectionlist,不过在此之前，需要定义下你所需要的头部数据有哪些，我这里定下了26个字母加上一个默认其他,具体代码如下：
constructor(props) {
super(props);
//name字段必须,其他可有可无
let nameData=[
{name:'阿玛尼',id:'amani',params: ''},
{name:'OK',id:'ok',params: '123'},
{name:'天津饭'},
{name:'%……&'},
{name:'周星驰'},
{name:'习大表哥'},
{name:'不要这样'},
{name:'V字仇杀队'},
{name:'拼车'},
{name:'他妈跌'},
{name:'淫僧'},
{name:'钱学森'},
{name:'宁采臣'},
{name:'史泰龙'},
{name:'恐龙'},
{name:'任达华'},
{name:'妈咪宝贝'},
{name:'ing'},
{name:'康麦隆'},
{name:'刘德华'},
{name:'精忠报国'},
{name:'黄药师'},
{name:'大叔皮'},
{name:'布达拉宫'},
{name:'方世玉'},
{name:'ET外星人'},
{name:'程咬金'},
{name:'**&&&&'},
]
this.state = {
dataArray: data,
}
}
然后通过查找资料，找到一个获取首字母的方法，传入一个字符串，不管是中文还是英文甚至火星文，都能获取到他的首个字母，因为代码比较多，所以还请在这个链接里查询方法文件(getFirstAlphabet.js)，之后再render方法里进行渲染：
<SectionList
{...this.props}
style={this.props.SectionListStyle}
ref={s=>this.sectionList=s}
keyExtractor={this._keyExtractor}
sections={delData}
renderSectionHeader={this._renderSectionHeader}
renderItem={this._renderItem}
getItemLayout={(data, index) => ( {length: this.props.sectionHeight, offset: this.props.sectionHeight * index, index} )}
/>
delData是数组数据源，getItemLayout是给出一个预计算，如果能知道每个item的高度的情况下，设置对应的值为此高度，能够很好的提高组件的渲染效果，同时也是后面能够点击索引定位到位置所必须的条件。这里的sectionHeight就是每个item的高度。
当然此组件也支持自定义头部样式和自定义内容item样式，可在文档里看到，这里不做说明。
最后就是右边索引的功能实现，我这里做的是给出的数据源里有对应的索引才显示，不然不显示，代码如下：
let data=_.cloneDeep(this.state.dataArray);
this.props.sectionListData.map((item,index)=>{
for (let i=0;i<data.length;i++){
if (i==data.length-1){
data[i].data.push(item)
break
}else if (data[i].key==makePy(item.name.toUpperCase())){
data[i].data.push(item)
break
}else {
continue
}
}
})
let delData = []
let letterData = []
for (var i in data){
if (data[i].data.length!=0){
delData.push(data[i])
letterData.push(data[i].key)
}
}
sectionListData是数据源数组，makePy即为获取每个字符串的首字母方法，最后得到的letterData数据即为索引数组，然后绝对定位渲染出索引：
<View style={[styles.letterView,this.props.letterViewStyle]}>
{
letterData.map((item,index)=>{
let otherStyle=[]
if (index==letterData.length-1){
if (item==this.props.otherAlphabet){
otherStyle.push({width: 20})
}
}
return(
<TouchableWithoutFeedback key={'letter_'+index} onPress=
{()=>{
this.sectionList.scrollToLocation({animated: this.props.scrollAnimation, itemIndex: 0,sectionIndex: index,viewOffset: (this.props.sectionHeight * (index + 1)) + (this.props.sectionHeaderHeight * index)})
}}>
<View style={[styles.letterItemView,otherStyle]}>
<Text numberOfLines={0} style={[styles.letterText,this.props.letterTextStyle]}>{item}</Text>
</View>
</TouchableWithoutFeedback>
)
})
}
</View>
当点击每个索引的时候，就会触发sectionList的scrollToLocation方法，最新版本已经修复了点击索引不准确的问题。
遇到点击索引不准确问题，可以试着设置sectionHeight和sectionHeaderHeight
最后中间踩到的坑，做一些经验总结：
可能会有大量数据的时候，会有卡顿情况，所以推荐子组件继承PureComponent，本开源组件默认已经做了这个功能，其次，会有遇到下滑加载缓慢，或者直接点击后面的索引到最后的位置会出现白屏等待很久的问题，这种处理方法可以加个initialNumToRender属性，值为数据源的个数，也就是全部渲染出来initialNumToRender={this.state.dataArray.length}
