React native ListView 增加頂部下拉刷新和底下點(diǎn)擊刷新示例
更新時(shí)間：2018年04月27日 11:57:06 作者：瓦力
這篇文章主要介紹了React native ListView 增加頂部下拉刷新和底下點(diǎn)擊刷新示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
1. 底部點(diǎn)擊刷新
1.1 先增加一個(gè)按鈕
render() {
if(!this.state.data){
return(
<Text>Loading... </Text>
)
}else{
return(
<ListView
refreshControl={
<RefreshControl
refreshing = {false}
onRefresh = {this.reloadWordData.bind(this)}
/>
}
dataSource={this.state.data}
renderRow={(rowData)=>this.renderRow(rowData)}
renderFooter={this.renderFooter.bind(this)}
>
</ListView>
);
}
}
renderFooter(){
return (
<View style={{marginVertical: 10, marginBottom:20}} >
<Button
onPress={this.addMoreOnFoot.bind(this)}
title="點(diǎn)擊載入更多"
/>
</View>
)
}
給ListView 增加一個(gè)renderFooter 方法來(lái)繪制底部元素。在里面顯示一個(gè)按鈕。
按鈕處理邏輯：
addMoreOnFoot(){
// alert('addMoreOnFoot')
// console.log('addMoreOnFoot')
const url = 'http://127.0.0.1/getFootContent?lastid=' + this.state.footLastId + '&count=20&isTop=0'
fetch(url)
.then((response)=>response.json())
.then((jsondata)=>{
if (jsondata.data && jsondata.data.length > 0){
const rowData = this.state.jsondata.concat(jsondata.data);
this.setState({
footLastId:jsondata.data[jsondata.data.length - 1]['id'],
jsondata:rowData,
data:new ListView.DataSource({rowHasChanged:(r1, r2) => r1 != r2}).cloneWithRows(rowData),
})
}
})
.catch((error)=>{
alert(error);
});
}
點(diǎn)擊后進(jìn)行網(wǎng)絡(luò)處理，把之前最后一條id也傳給服務(wù)器，讓服務(wù)器返回這個(gè)id后面的20條記錄。然后重新setState即可。
2. 頭部下拉刷新
ListView中增加RefeshControl
render() {
if(!this.state.data){
return(
<Text>Loading... </Text>
)
}else{
return(
<ListView
refreshControl={
<RefreshControl
refreshing = {false}
onRefresh = {this.reloadWordData.bind(this)}
/>
}
dataSource={this.state.data}
renderRow={(rowData)=>this.renderRow(rowData)}
renderFooter={this.renderFooter.bind(this)}
>
</ListView>
);
}
}
載入最新的頭部數(shù)據(jù)添加到this.State中
reloadWordData(){
// alert(this.state.topLastId)
const url = 'http://127.0.0.1/getFootContent?lastid=' + this.state.topLastId + '&count=20&isTop=1'
fetch(url)
.then((response)=>response.json())
.then((jsondata)=>{
if (jsondata.data && jsondata.data.length > 0){
const rowData = jsondata.data.concat(this.state.jsondata);
this.setState({
topLastId:jsondata.data[0]['id'],
jsondata:rowData,
data:new ListView.DataSource({rowHasChanged:(r1, r2) => r1 != r2}).cloneWithRows(rowData),
})
}
})
.catch((error)=>{
alert(error);
});
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了React-Router6版本的更新引起的路由用法變化，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
這篇文章主要介紹了React hooks的優(yōu)缺點(diǎn)詳解，幫助大家更好的理解和學(xué)習(xí)使用React，感興趣的朋友可以了解下， 希望能夠給你帶來(lái)幫助2021-09-09
詳解如何封裝和使用一個(gè)React鑒權(quán)組件
JavaScript?和?React?提供了靈活的事件處理機(jī)制,特別是通過(guò)利用事件的捕獲階段來(lái)阻止事件傳播可以實(shí)現(xiàn)精細(xì)的權(quán)限控制,本文將詳細(xì)介紹這一技術(shù)的應(yīng)用,并通過(guò)實(shí)踐案例展示如何封裝和使用一個(gè)?React?鑒權(quán)組件,需要的可以參考下2024-03-03
Docker部署SpringBoot項(xiàng)目到云服務(wù)器的實(shí)現(xiàn)步驟
Docker作為一種輕量級(jí)的容器化技術(shù)，為開(kāi)發(fā)者提供了快速、便捷的部署方案，本文主要介紹了Docker部署SpringBoot項(xiàng)目到云服務(wù)器，具有一定的參考價(jià)值，感興趣的可以了解一下2024-01-01
這篇文章主要介紹了React組件通信,在開(kāi)發(fā)中組件通信是React中的一個(gè)重要的知識(shí)點(diǎn)，本文通過(guò)實(shí)例代碼給大家講解react中常用的父子、跨組件通信的方法，需要的朋友可以參考下2023-03-03
React中useCallback useMemo使用方法快速精通
在React函數(shù)組件中，當(dāng)組件中的props發(fā)生變化時(shí)，默認(rèn)情況下整個(gè)組件都會(huì)重新渲染。換句話說(shuō)，如果組件中的任何值更新，整個(gè)組件將重新渲染，包括沒(méi)有更改values/props的函數(shù)/組件。在react中，我們可以通過(guò)memo，useMemo以及useCallback來(lái)防止子組件的rerender2023-02-02
react 可拖拽進(jìn)度條的實(shí)現(xiàn)
本文主要介紹了react 可拖拽進(jìn)度條的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
React實(shí)現(xiàn)路由鑒權(quán)的實(shí)例詳解
React應(yīng)用中的路由鑒權(quán)是確保用戶(hù)僅能訪問(wèn)其授權(quán)頁(yè)面的方式,用于已登錄或具有訪問(wèn)特定頁(yè)面所需的權(quán)限,這篇文章就來(lái)記錄下React實(shí)現(xiàn)路由鑒權(quán)的流程,需要的朋友可以參考下2024-07-07
React學(xué)習(xí)之受控組件與數(shù)據(jù)共享實(shí)例分析
這篇文章主要介紹了React學(xué)習(xí)之受控組件與數(shù)據(jù)共享,結(jié)合實(shí)例形式分析了React受控組件與組件間數(shù)據(jù)共享相關(guān)原理與使用技巧,需要的朋友可以參考下2020-01-01
使用Jenkins部署React項(xiàng)目的方法步驟
這篇文章主要介紹了使用Jenkins部署React項(xiàng)目的方法步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03