效果圖
ios.gif
介紹
上次的文章 react-native開(kāi)發(fā)實(shí)例之城市選擇組件 介紹了simple city select版本，沒(méi)有實(shí)現(xiàn)類(lèi)似下圖的功能矾端。
Paste_Image.png
這次的update改進(jìn)主要針對(duì)這塊區(qū)域和searchbox部分先较。
代碼
http://git.oschina.net/react9527/react-native-select-city
幾點(diǎn)分析
- 重點(diǎn)還是計(jì)算每個(gè)section+rows的高度携冤，這樣點(diǎn)擊右邊的index才能定位到正確的地方，這里重點(diǎn)邏輯是：
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;
}
及對(duì)字母索引的直接row length乘以高度闲勺，而另外3種情況需要考慮每行3個(gè)元素
對(duì)于兩種情況需要就行不同的布局處理曾棕，這里的差異主要是通過(guò)listview的renderRow方法的處理邏輯體現(xiàn)差異，具體可以看代碼
這個(gè)select city組件其實(shí)就是listview組件的一些高級(jí)用法霉翔，本質(zhì)上理解好listview的row睁蕾、section這2個(gè)東西就可以搞定了
地圖定位功能目前沒(méi)有增加，后續(xù)繼續(xù)update進(jìn)來(lái)
