React Native写索引，但是我们想要滑动的效果，而不是点击的效果，想知道的戳这里

1.前几天有一个需求是例如微信好友列表里a-z的索引，是滑动切换的，但是呢由于自己学识浅薄，只会写点击的，后来求助大神，帮忙写了一个小demo也实现简单的滑动效果。

1.下面直接上代码，看一下这个简单的效果。
这个的原理是通过计算你第一次触摸的时候的垂直位置，然后再去算去所在区域字母的位置，然后计算出当前位置对应的是那个字母，然后再通过当前的字母去展示搜索到的内容。

import React, { Component } from 'react';
import {
    AppRegistry,
    Dimensions,
    StyleSheet,
    View,
    Text,
    Button,
    Image,
    ToastAndroid,
    TouchableWithoutFeedback,
} from 'react-native';
let ScreenWidth = Dimensions.get('window').width;
let ScreenHeight = Dimensions.get('window').height;
const returnTrue = () => true;
class TestScreen extends Component {
    constructor(props, context) {
        super(props);
        this.select_nav = this.select_nav.bind(this);
        this.select_null = null;
    }

    select_nav(e){ //滑动触发事件
        // 输出当前 view
        const ev = e.nativeEvent.touches[0]; //获取多个触摸事件的第一个。比如你放了三根手指在屏幕上，他只算第一个放到屏幕上的
        const targetY = ev.pageY; //动态获取屏幕上触摸点垂直方向的距离
        const localY = ev.locationY; //第一次触摸到屏幕上距离顶部的距离
        const { y, width, height } = this.measure;
        this.getZM(y,targetY); //定位字母，并且触发相应的事件

    }

    resetSection() {
        this.select_null = null;
    }

    fixSectionItemMeasure() {
        const sectionItem = this.refs.view;
        if (!sectionItem) {
            return;
        }
        this.measureTimer = setTimeout(() => {
            sectionItem.measure((x, y, width, height, pageX, pageY) => {
            //console.log([x, y, width, height, pageX, pageY]);
            this.measure = {
            y: pageY,
            width,
            height
        };
    })
    }, 0);
    }

    getZM(topHeight,currentHeight){ //定位字母 topHeight:外层元素到顶部的距离 currentHeight:当前触摸点距离y高度
        var zm=['A','B','C'];
        var navItemHeight=50;//字母行高 如果有边框请注意把边框也加上
        var navHeight=navItemHeight*zm.length; //计算字母导航高度
        var indexNav=Math.ceil((currentHeight-topHeight)/navItemHeight)-1;
        // 触发相应的事件 比如切换state
        // ...

        if (zm[indexNav]) {
            console.log(zm[indexNav]);
            // console.log(currentHeight+"="+navHeight);
            return zm[indexNav];
        }
        else{
            console.log('null');
        }

    }
    componentDidMount() {
        this.fixSectionItemMeasure();
    }

    // fix bug when change data
    componentDidUpdate() {
        this.fixSectionItemMeasure();
    }

    componentWillUnmount() {
        this.measureTimer && clearTimeout(this.measureTimer);
    }

    //给最外层的view增加一个
    render() {
        return (

            
    测试A
            测试B
            测试C
            
    );
    }
}

const styles = StyleSheet.create({
    container:{
        marginTop:50,
        width:80,
        marginLeft:50,
        borderWidth:1,
        borderColor:"#000",
    },
    icon: {
        width: 25,
        height: 25,
    },
    oit:{
        height:50,
        justifyContent:'center',
        alignItems:'center',
    },
});



module.exports = TestScreen;