React-native 基于flatlist 的上啦和下拉

2017-06-13  本文已影响0人  HT_Jonson

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 自己研究

上一篇下一篇

猜你喜欢

热点阅读