react-native ListView下拉刷新上拉加載實現(xiàn)代碼
更新時間：2017年08月03日 09:22:14 作者：Tomoya
本篇文章主要介紹了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?之?Suspense提出的背景及使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
淺談react?16.8版本新特性以及對react開發(fā)的影響
本文主要介紹了react?16.8版本新特性以及對react開發(fā)的影響，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
useEffect?返回函數(shù)執(zhí)行過程源碼解析
這篇文章主要為大家介紹了useEffect?返回函數(shù)執(zhí)行過程源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
React Hooks獲取數(shù)據(jù)實現(xiàn)方法介紹
這篇文章主要介紹了react hooks獲取數(shù)據(jù),文中給大家介紹了useState dispatch函數(shù)如何與其使用的Function Component進行綁定，實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-10-10
React中完整實例講解Recoil狀態(tài)管理庫的使用
這篇文章主要介紹了React中Recoil狀態(tài)管理庫的使用，Recoil的產(chǎn)生源于Facebook內(nèi)部一個可視化數(shù)據(jù)分析相關(guān)的應(yīng)用，在使用React的實現(xiàn)的過程中，因為現(xiàn)有狀態(tài)管理工具不能很好的滿足應(yīng)用的需求，因此催生出了Recoil，對Recoil感興趣可以參考下文2023-05-05
react16+antd4 RangePicker組件實現(xiàn)時間禁選示例
這篇文章主要為大家介紹了react16+antd4 RangePicker 時間禁選示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
這篇文章主要介紹了react裝飾器與高階組件及簡單樣式修改的操作，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-09-09
這篇文章主要為大家介紹了React?模式之純組件使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要介紹了搭建React?Native熱更新平臺,要實現(xiàn)?React?Native?熱更新功能，有四種思路?Code?Push、Pushy、Expo?和自研，感興趣的朋友一起通過本文學(xué)習(xí)吧2022-05-05
antd?是基于?Ant?Design?設(shè)計體系的?React?UI?組件庫，主要用于研發(fā)企業(yè)級中后臺產(chǎn)品，這篇文章主要介紹了React中使用antd組件,需要的朋友可以參考下2022-09-09