效果图

ios.gif

介绍

上次的文章 react-native开发实例之城市选择组件 介绍了simple city select版本，没有实现类似下图的功能。

Paste_Image.png

这次的update改进主要针对这块区域和searchbox部分。

代码

http://git.oschina.net/react9527/react-native-select-city

几点分析

• 重点还是计算每个section+rows的高度，这样点击右边的index才能定位到正确的地方，这里重点逻辑是：

let eachheight = SECTIONHEIGHT + ROWHEIGHT * thisRow.length;
            if (sectionID === key_hot || sectionID === key_now || sectionID === key_last_visit) {
                let rowNum = (thisRow.length % 3 === 0)
                    ? (thisRow.length / 3)
                    : parseInt(thisRow.length / 3) + 1;

                console.log('sectionIDs===>' + sectionIDs + ", rowNum=====>" + rowNum);

                eachheight = SECTIONHEIGHT + ROWHEIGHT_BOX * rowNum;
            }

及对字母索引的直接row length乘以高度，而另外3种情况需要考虑每行3个元素

• 对于两种情况需要就行不同的布局处理，这里的差异主要是通过listview的renderRow方法的处理逻辑体现差异，具体可以看代码

• 这个select city组件其实就是listview组件的一些高级用法，本质上理解好listview的row、section这2个东西就可以搞定了

• 地图定位功能目前没有增加，后续继续update进来