Android基于FlatList的上拉、下拉刷新组件

时间:2017-08-21 11:12 来源:互联网 作者:源码搜藏收藏

  • 源码类别:列表ListView
  • 源码大小:未知
  • 编码格式:gbk,utf8,不限
  • 运行环境:Android studio
  • 广告推荐

react-native-refresh-list-view

初学react native,看到github上现有的相关控件实现都较为复杂,又不太符合自己心中想要的样子。于是自己做了一个简单的列表下拉、上拉刷新控件。列表使用的是FlatList。

控件的实现非常简单,代码一共100多行,方便各位根据自己的需求随意修改。如果有bug或建议,欢迎提issue。

截图

下拉刷新

1

上拉翻页

2

已加载全部数据

3

安装

NPM

npm install --save react-native-refresh-list-view

手动安装

下载源码,将RefreshListView.js拖入工程

运行Demo

第一步

进入Example目录,执行:

npm install

第二步

react-native run-ios

接口

render() {
    return (
        <RefreshListView
            data={this.state.dataList}
            keyExtractor={this.keyExtractor}
            renderItem={this.renderCell}

            refreshState={this.state.refreshState}
            onHeaderRefresh={this.onHeaderRefresh}
            onFooterRefresh={this.onFooterRefresh}
        />
    )
}

// 下拉刷新
this.setState({refreshState: RefreshState.HeaderRefreshing})

// 上拉翻页
this.setState({refreshState: RefreshState.FooterRefreshing})

// 加载成功
this.setState({refreshState: RefreshState.Idle})

// 加载失败
this.setState({refreshState: RefreshState.Failure})

// 加载全部数据
this.setState({refreshState: RefreshState.NoMoreData})

常见问题

列表滑动过程中,可能会出现警告 Task orphaned for request <NSMutableURLRequest: [[SOME_HEX_CODE]]> { URL: [[IMG_URL]] }

本站资源仅限于学习研究,严禁从事商业或者非法活动! 源码搜藏网所有源码来自互联网转载与用户上传分享,如果侵犯了您的权益请与我们联系,我们将在24小时内删除!谢谢!
下一篇:没有了

列表ListView下载排行

最新文章