有一個(gè)很好的下拉刷新栈暇、上拉加載庫(kù)：react-native-pull
地址：https://github.com/greatbsky/react-native-pull-demo
下載
npm install react-native-pullview --save
使用
import {PullList} from 'react-native-pull';//PullList相當(dāng)于ListView
源碼地址：https://github.com/greatbsky/react-native-pull-demo/blob/master/PullListDemo/app.js
import {PullView} from 'react-native-pull';//PullView相當(dāng)于ScrollView
源碼地址：https://github.com/greatbsky/react-native-pull-demo/blob/master/PullViewDemo/app.js
下載好庫(kù)直接復(fù)制上面網(wǎng)址里面的代碼就可以看到效果馆蠕，使用簡(jiǎn)單
PullList使用
在對(duì)應(yīng)的方法里進(jìn)行相應(yīng)的操作即可
自定義頂部的方法
在下拉到完成時(shí)涝桅，上面的方法是不停地調(diào)用的
有三個(gè)參數(shù)
下拉：pulling=true,pullok=false,pullrelease=false
到達(dá)臨界點(diǎn)：pulling=false,pullok=true,pullrelease=false
釋放：pulling=false,pullok=false,pullrelease=true
可以根據(jù)這三個(gè)參數(shù)判斷什么時(shí)候顯示什么樣的界面
上圖是官方的例子（說(shuō)實(shí)話(huà)闷游，我這種小白就喜歡簡(jiǎn)單粗暴的，上面的代碼表示完全看不懂）
以下是我自己寫(xiě)的贴汪，簡(jiǎn)單到詞窮
在view里面放一個(gè)Text脐往，通過(guò)state改變Text的文本，更復(fù)雜就自己干吧
onPullOk(){
//只要拉倒那個(gè)臨界點(diǎn)扳埂，就會(huì)調(diào)用該方法
console.log('onPullOk');
this.setState({
loadText:'釋放刷新'
});
}
onPulling(){
//下拉時(shí)調(diào)用
console.log('onPulling');
this.setState({
loadText:'下拉刷新',
});
}
onPullRelease(resolve) {
//松開(kāi)手指刷新調(diào)用
console.log('onPullRelease');
this.setState({
loadText:'正在刷新',
isRefreshing:false,
isLoadEnd:false,
});
setTimeout(() => {
// 準(zhǔn)備下拉刷新的5條數(shù)據(jù)
var data=this.state.dataSource;
let arr= Array.from(new Array(5)).map((item,index)=>{
return ('row:'+{index})
}).concat(data);
this.setState({
isRefreshing: true,
dataSource: arr,
loadText:'下拉刷新',
isLoadEnd:true,
});
//回到原始狀態(tài)
resolve();
}, 2000);
}
PullView使用
和pullList使用一樣的业簿，多的就不寫(xiě)了
上拉加載主要就是這個(gè)
//React Native中文網(wǎng)注釋如下：
// 當(dāng)所有的數(shù)據(jù)都已經(jīng)渲染過(guò)，并且列表被滾動(dòng)到距離最底部不足onEndReachedThreshold個(gè)像素的距離時(shí)調(diào)用阳懂。
// 原生的滾動(dòng)事件會(huì)被作為參數(shù)傳遞梅尤。
// 譯注：當(dāng)?shù)谝淮武秩緯r(shí)，如果數(shù)據(jù)不足一屏（比如初始值是空的）岩调，這個(gè)事件也會(huì)被觸發(fā)巷燥，請(qǐng)自行做標(biāo)記過(guò)濾。
onEndReached={this.loadMore}
onEndReachedThreshold={60}
大概和iOS的差不多号枕，滾動(dòng)到倒數(shù)第幾個(gè)cell的時(shí)候缰揪，請(qǐng)求下一頁(yè)的數(shù)據(jù)，這里只不多是換成了距離底部多少距離而已
同時(shí)也看了RN上面的 RefreshControl 刷新葱淳，也只是做了個(gè)小例子钝腺，使用更加簡(jiǎn)單
(下方title抛姑，tintColor 標(biāo)注錯(cuò)誤，tintColor為菊花顏色艳狐，都是iOS可用)
demo:
看效果可以在 idnex.ios.js里面改變跳轉(zhuǎn)的頁(yè)面
