react-native-refresh-list-view
Github地址
https://github.com/huanxsd/react-native-refresh-list-view
簡書
一個基于FlatList的列表下拉薄榛、上拉刷新控件。代碼一共100多行让歼，盡量寫得簡單易懂敞恋，方便各位根據(jù)自己的需求隨意修改。
如果有bug或建議谋右，歡迎提issue硬猫。
截圖
下拉刷新
1.png
上拉翻頁
2.png
已加載全部數(shù)據(jù)
3.png
安裝
NPM
npm install --save react-native-refresh-list-view
手動安裝
下載源碼，將RefreshListView.js拖入工程中
運行Demo
第一步
進入Example目錄改执，執(zhí)行：
npm install
第二步
react-native run-ios
Example
constructor(props) {
super(props)
this.state = {
refreshState: RefreshState.Idle,
}
}
render() {
return (
<RefreshListView
data={this.state.dataList}
keyExtractor={this.keyExtractor}
renderItem={this.renderCell}
refreshState={this.state.refreshState}
onHeaderRefresh={this.onHeaderRefresh}
onFooterRefresh={this.onFooterRefresh}
/>
)
}
// 開始下拉刷新
this.setState({refreshState: RefreshState.HeaderRefreshing})
// 開始上拉翻頁
this.setState({refreshState: RefreshState.FooterRefreshing})
// 加載成功
this.setState({refreshState: RefreshState.Idle})
// 加載失敗
this.setState({refreshState: RefreshState.Failure})
// 加載全部數(shù)據(jù)
this.setState({refreshState: RefreshState.NoMoreData})
Props
| Prop | Type | Description | Default |
|---|---|---|---|
| refreshState | number | 列表刷新狀態(tài)： 1啸蜜、Idle（普通狀態(tài)） 2、HeaderRefreshing（頭部菊花轉(zhuǎn)圈圈中） 3辈挂、FooterRefreshing（底部菊花轉(zhuǎn)圈圈中） 4衬横、NoMoreData（已加載全部數(shù)據(jù)） 5、Failure（加載失斨盏佟） |
None |
| onHeaderRefresh | (refreshState: number) => void | 下拉刷新回調(diào)方法 refreshState參數(shù)值為RefreshState.HeaderRefreshing |
None |
| onFooterRefresh | (refreshState: number) => void | 上拉翻頁回調(diào)方法 refreshState參數(shù)值為RefreshState.FooterRefreshing |
None |
| data | Array | 同F(xiàn)latList中的data屬性 | None |
| footerContainerStyle | ?Object | 自定義底部容器樣式 | None |
| footerTextStyle | ?Object | 自定義底部文字樣式 | None |
| footerRefreshingText | ?string | 自定義底部刷新中文字 | '數(shù)據(jù)加載中…' |
| footerFailureText | ?string | 自定義底部失敗文字 | '點擊重新加載' |
| footerNoMoreDataText | ?string | 自定義底部已加載全部數(shù)據(jù)文字 | '已加載全部數(shù)據(jù)' |
常見問題
列表滑動過程中蜂林，可能會出現(xiàn)警告
Task orphaned for request <NSMutableURLRequest: [[SOME_HEX_CODE]]> { URL: [[IMG_URL]] }
具體錯誤見官方issue。
解決方案：使用圖片緩存庫react-native-cached-image
