react-native-refresh-list-view上拉、下拉刷新組件

初學(xué) React Native，看到 Github 上現(xiàn)有的相關(guān)控件實(shí)現(xiàn)都較為復(fù)雜，又不太符合自己心中想要的樣子。于是自己做了一個簡單的列表下拉、上拉刷新控件。列表使用的是 FlatList。

控件的實(shí)現(xiàn)非常簡單，代碼一共 100 多行，方便各位根據(jù)自己的需求隨意修改。如果有 bug 或建議，歡迎提 issue。

截圖

• 下拉刷新
  

• 上拉翻頁
  

• 已加載全部數(shù)據(jù)
  

安裝

NPM

npm install --save react-native-refresh-list-view

手動安裝

下載源碼，將 RefreshListView.js 拖入工程中

運(yùn)行 Demo

第一步

進(jìn)入Example目錄，執(zhí)行：

npm install

第二步

react-native run-ios

接口

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})

常見問題

列表滑動過程中，可能會出現(xiàn)警告

Task orphaned for request <NSMutableURLRequest: [[SOME_HEX_CODE]]> { URL: [[IMG_URL]] }