0鸳吸、寫在前面
用React Native也有一段時(shí)間了艘刚，新出來(lái)的加載列表控件FlatList也出來(lái)了张肾，F(xiàn)latList本身是支持下拉刷新和上拉加載更多的芭析，而且性能比ListView要強(qiáng)，但是Android和IOS要統(tǒng)一下拉頭吞瞪，所以只能重寫這個(gè)控件馁启，但是網(wǎng)上找半天沒(méi)有找到基于FlatList，只是找到這個(gè) react-native-pull 基于ListView的芍秆，所以自己動(dòng)手豐衣足食惯疙，順便鍛煉一下自己的React Native技能翠勉，但是是基于react-native-pull它的，站在巨人肩膀可以看的更遠(yuǎn)霉颠。項(xiàng)目源碼地址, Demo地址喜歡的給個(gè)star对碌，謝謝！
1蒿偎、特點(diǎn)
**
0- 純js跨平臺(tái)
1- Android俭缓、IOS 統(tǒng)一下拉頭
2- 下拉刷新和上拉加載
3- 加載中、正常顯示酥郭、空數(shù)據(jù)、網(wǎng)絡(luò)異常等情況的處理愿吹，用戶不用關(guān)心
4- 控件是基于最新的FlatList
5- 以上情況都支持自定義
6- FlatList自身支持的 單擊Item不从，添加頭部等
**
2、直接上效果圖
**下面效果圖有點(diǎn)失真犁跪，錄制有誤椿息，真實(shí)情況不卡，真實(shí)情況不卡坷衍，真實(shí)情況不卡Ｇ抻拧！枫耳！
3乏矾、使用姿勢(shì)
導(dǎo)入控件：
npm install react-native-refreshlist --save
import RefreshList from 'react-native-refreshlist'
使用控件：
<RefreshList
ref={(list)=> this._listRef = list}
onPullRelease={(resolve)=> this._onPullRelease(resolve)}
ItemHeight={120}
onEndReached={()=> this._loadMore()}
renderItem={(item)=> this._renderItem(item)}/>
使用說(shuō)明：
- 要給組件設(shè)置一個(gè)ref
- 下拉刷新的設(shè)置onPullRelease，并且從父控件傳入一個(gè)回調(diào)
- 設(shè)置ItemHeight屬性迁杨，為了給Item一個(gè)固定高度钻心，官方說(shuō)增加性能
- onEndReached設(shè)置上拉加載更多
- 渲染Item控件 renderItem
- 下拉刷新數(shù)據(jù)的設(shè)置 this._listRef.setData(data);
- 上拉加載更多的設(shè)置 this._listRef.addData(data);
- 給控件增加以下屬性可以 自定義
renderLoading 加載中 自定義
renderEmpty 空頁(yè)面 自定義
renderError 數(shù)據(jù)錯(cuò)誤 自定義
renderNoMore 沒(méi)有更多 自定義
renderMoreError 加載更多出錯(cuò) 自定義
renderMore 加載更多 自定義
4、Demo
以上說(shuō)了那么多估計(jì)還是模糊铅协，還是直接上Demo
Demo地址
5捷沸、參考文章
https://facebook.github.io/react-native/docs/flatlist.html
https://github.com/greatbsky/react-native-pull
https://github.com/gzfgeh/RefreshListDemo
https://github.com/gzfgeh/RefreshList
最后，喜歡的給個(gè)star狐史，謝謝痒给！
