react-native ListView下拉刷新上拉加載實現(xiàn)代碼
本文介紹了react-native ListView下拉刷新上拉加載實現(xiàn)。分享給大家，具體如下：
先看效果圖
下拉刷新
React Native提供了一個組件可以實現(xiàn)下拉刷新方法RefreshControl
使用方法
<ListView
refreshControl={
<RefreshControl
refreshing={this.state.refreshing}
onRefresh={this._onRefresh.bind(this)}
/>
}
//...
</ListView>
在視圖加載的時候的時候，將refreshing設(shè)置為true，數(shù)據(jù)加載完成設(shè)置為false即可
上拉加載
利用ListView里的onEndReached方法實現(xiàn)，ListView在滾動到最后一個Cell的時候,會觸發(fā)onEndReached方法
先在ListView里添加一個Footer
render() {
const FooterView = this.state.loadMore ?
<View style={styles.footer}>
<Text style=>加載更多...</Text>
</View> : null;
return <ListView
refreshControl={
<RefreshControl
refreshing={this.state.refreshing}
onRefresh={this._onRefresh.bind(this)}
/>
}
style={[styles.listView]}
dataSource={ds.cloneWithRows(this.state.dataSource)}
enableEmptySections={true}
renderRow={this._renderRow.bind(this)}
onEndReachedThreshold={5}
onEndReached={this._onEndReached.bind(this)}
renderFooter={() => FooterView}
/>
}
在方法_onEndReached里將Footer顯示出來，在數(shù)據(jù)加載完成之后，再隱藏掉Footer
_onEndReached() {
this.setState({
loadMore: true,
pageNo: this.state.pageNo + 1
});
this._fetchData();
}
說明
ListView里還設(shè)置了一個參數(shù)onEndReachedThreshold這個參數(shù)與onEndReached配合使用，它的意思是：像素的臨界值，該屬性和onEndReached配合使用，因為onEndReached滑動結(jié)束的標志是以該值作為判斷條件的
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
react?native?reanimated實現(xiàn)動畫示例詳解
這篇文章主要為大家介紹了react?native?reanimated實現(xiàn)動畫示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
我們組的前端妹子在組內(nèi)分享時談到了 react 的鉤子，趁此機會我也對我所理解的內(nèi)容進行下總結(jié)，方便更多的同學(xué)了解。在 React 的 v16.8.0 版本里添加了 hooks 的這種新的 API，我們非常有必要了解下他的使用方法，并能夠結(jié)合我們的業(yè)務(wù)編寫幾個自定義的 hooks。2021-05-05
react?express實現(xiàn)webssh?demo解析
這篇文章主要為大家介紹了詳解react?express實現(xiàn)webssh?demo解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
這篇文章主要介紹了React?在非組件環(huán)境切換路由的方法,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-10-10
Webpack 4.x搭建react開發(fā)環(huán)境的方法步驟
這篇文章主要介紹了Webpack 4.x搭建react開發(fā)環(huán)境的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
解決React報錯Property 'X' does not
這篇文章主要為大家介紹了解決React報錯Property 'X' does not exist on type 'HTMLElement'，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
React 全自動數(shù)據(jù)表格組件——BodeGrid的實現(xiàn)思路
表格是在后臺管理系統(tǒng)中用的最頻繁的組件之一，相關(guān)的功能有數(shù)據(jù)的新增和編輯、查詢、排序、分頁、自定義顯示以及一些操作按鈕。這篇文章主要介紹了React 全自動數(shù)據(jù)表格組件——BodeGrid ,需要的朋友可以參考下2019-06-06
本篇文章主要介紹了關(guān)于react-router的幾種配置方式詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了為react組件庫添加typescript類型提示，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
關(guān)于useEffect執(zhí)行兩次的問題及解決
這篇文章主要介紹了關(guān)于useEffect執(zhí)行兩次的問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09