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

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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容