ReactNative實現城市選擇列表

使用rn開發了一段時間,最近遇到了乙個比較棘手的問題,就是用react寫個城市選擇列表,當然這個如果用android原生來寫,網上的例子數不勝數,隨便就能找到,但是react卻很少,也沒有乙個和我這個需求相匹配的,所以就只能自己動手擼乙個出來咯.

這個城市列表和其他的有點區別

1,有當前定位城市

2,有熱門城市

3,每個子項是乙個類似gridview的效果,而不是listview

實現的效果圖如下:

}**如下:

/*右側索引*/

sectionitemview() 
return 
});return (
true} 
onmoveshouldsetresponder=
onresponderterminationrequest=
onrespondergrant=
onrespondermove= 
onresponderrelease=
>);}

這裡的幾個方法需要具體說明一下(react native手勢響應,就和android的ontouchevent乙個意思):

通過實施正確的處理方法，檢視可以成為接觸響應器。有兩種方法來詢問檢視是否想成為響應器：

事件處理:

/*使用者手指開始觸控*/

respondergrant(event) )
}/*使用者手指在螢幕上移動手指，沒有停下也沒有離開*/
respondermove(event) )
}/*使用者手指離開螢幕*/
responderrelease(event) )
}/*手指滑動，觸發事件*/
scrollsectionlist(event) )
//預設跳轉到 第 index 個section  的第 1 個 item
this.refs.sectionlist.scrolltolocation();}}
}

這裡根據手指在右邊索引欄的滑動事件,獲取到當前的x軸和y軸的具體值,然後計算出具體的子專案的標題,讓sectionlist滾動到具體的index位置;

this._createitem(item)}

keyextractor=
/>

這樣基本大體的效果就實現了

react native實現這個有個很坑爹的地方,就是渲染列表會花費很長的時間,android是這樣,ios沒試過,所以如果沒有渲染完就去滑動索引欄會報這個scrolltoindex-should-be-used-in-conjunction-with-getitemlayout-or-on異常,網上找了很多資料,說是sectionlist沒有渲染完就呼叫scrolltolocation,如果要在沒有渲染完之前呼叫scrolltolocation需要配合getitemlayout使用,但是這個getitemlayout又需要傳入具體item的高度,然而我的flatlist的高度是不確定的,所以就很坑爹了,找不到辦法解決,只能延時載入右邊索引欄;

**如下:

componentdidmount() )

}, 1600)
}

React Native 實現無限輪播

1 配置環境 2 環境配置出現錯誤，請看這一篇 4 需要將資源放到工程中。5 展示如下 檢視繪製完畢之後會呼叫此方法 componentdidmount 開啟定時器 starttimer else 更新狀態機 this.setstate 改變scrollview的偏移量 let offset tem...

React native 實現iOS端喚起App

使用universal links 首先你需要有乙個https開頭的網域名稱，並且具有ssl證書 2.wwdc news 指定鏈結，是指只允許 你設定的網域名稱 wwdc news 可以訪問。3.videos wwdc 2015 後面跟星號表示 網域名稱 wwdc news 任何內容都可訪問。4.如...

react Native如何實現跨平台

react native如何實現跨平台 react native是通過虛擬dom實現跨平台，執行時 將虛擬dom轉換為相應的web編碼 android編號 ios編碼進行執行的。實現 01.html 01.js react 元件化 元件的重用 自定義元件 class childtext extend...