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 自己研究
网友评论