用React Native 写的城市选择组件

	现如今城市列表选择组件在业务上需求很大，因此今天用React Naitve来实现一个城市列表的功能。话不多说，先来看看实现的效果：

根据效果来看很像是苹果手机的通讯录，那么接下来，我们就要开始写代码了。

1. 页面编写
   页面编写不用做过多的说明，关于下方城市选择的标签我们可以选择：SectionList,ListView,ScrollView,FlatList等。由于顶部的大学字母区域不用动态的生成，因此我们这里大可不必使用SectionList。我们这里选择一个最基础的标签ScrollView来实现它。
   首先我们得有一个关于城市的JSON文件，从A到Z，这里用的是下到省市，可以参考。
   
   我们可以通过遍历来获取大写字母，也可以自行定义一个新的数组来存放大写字母。由于这里数据较多并且大写字母是固定的，因此我定义了新的数组
   
   关于城市的列表，用map()直接遍历渲染就行了。这里需要注意的是***每条数据的高度最好都同意，每一个字母区域最好不要设置外边距，不然后面滑动的时候像素不好控制。***

2. 获取每个字母区域的高度
   首先定义一个空数组用于存放每个字母区域的高度，其次初始化一个变量，其值与没个城市列表的高度相同，最后遍历得到没个区域的高度并将其放进去，这样便得到一个完整的储存高度的数组了
   
   

3. 点击右侧字母自动滑动到相应位置
   当我们点击右侧字母时进入点击事件，首先修改大写字母的值，接着通过scrollTo()使页面跳转到相应下标的高度上去。这里传入的值是点击字母以及该字母的下标，很方便的可以控制改变的值以及下标的值。
   

4. 滑动列表改变大写字母
   滑动scrollView时通过onScroll()实时监听。利用e.nativeEvent.contentOffset.y可以得到滑动的坐标。然后通过之前的没个区域高度的数组得到每个区域的坐标，利用当前滑动的位置来确定所在区域的坐标。
   
   字母A的区域是从0开始的，因此单独分开来判断，这样便实现了全部功能。

5. 总结
   这个组件实现原理比较通俗易懂，用起来也比较方便，由于这些坐标大小都是需要计算的，因此唯一需要注意的就是要清楚的知道每个列表以及每个区域的高度大小，尤其是有内外边距的时候，否则滑动的区域会发生错误。