RN更新0.44后 list列表做了一些優化.
高性能的簡單列表組件,支持下面這些常用的功能:
完全跨平臺。
支持水平布局模式。
行組件顯示或隱藏時可配置回調事件。
支持單獨的頭部組件。
支持單獨的尾部組件。
支持自定義行間分隔線。
支持下拉刷新。
支持上拉加載。
支持跳轉到指定行(ScrollToIndex)。
如果需要分組/類/區(section),請使用<SectionList>
。
然后發現了一個兄弟寫的 封裝,我舉得挺好的,不過有BUG.
所以自己又修改了下
這里放出github地址 https://github.com/gzfgeh/RefreshListDemo
先說問題
當我們下拉加載的時候,這時候你突然退出控制器就會報錯.
找不到setdata() 這個方法.
其實是timer定時的問題,控制器銷毀了,結果定時器沒清空.
自己修改的代碼:
constructor(props) {
super(props);
this.moreTime = 0;
var timer1 = null;
}
//控制器即將銷毀的時候
componentWillUnmount() {
// 請注意Un"m"ount的m是小寫
// 如果存在this.timer,則使用clearTimeout清空。
// 如果你使用多個timer,那么用多個變量,或者用個數組來保存引用,然后逐個clear
this.timer1 && clearTimeout(this.timer1);
}
/**
* 下拉刷新
* @private
*/
_onPullRelease(resolve) {
//原作者代碼
// let timer = setTimeout(() => {
// clearTimeout(timer);
// resolve();
// this.moreTime = 0;
// this._listRef.setData(newData);
// }, 3000);
//修改后的代碼
this.timer1 = setTimeout(
() => {
this.moreTime = 0;
this._listRef.setData(newData);
},
500
);
}
請自行下載DEMO 自己研究