現如今城市列表選擇元件在業務上需求很大，因此今天用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. 總結
   這個元件實現原理比較通俗易懂，用起來也比較方便，由於這些座標大小都是需要計算的，因此唯一需要注意的就是要清楚的知道每個列表以及每個區域的高度大小，尤其是有內外邊距的時候，否則滑動的區域會發生錯誤。