美文网首页
React-native 基于flatlist 的上啦和下拉

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

作者: HT_Jonson | 来源:发表于2017-06-13 14:26 被阅读0次

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

    相关文章

      网友评论

          本文标题:React-native 基于flatlist 的上啦和下拉

          本文链接:https://www.haomeiwen.com/subject/lhmdqxtx.html