开源中国

我们不支持 IE 10 及以下版本浏览器

It appears you’re using an unsupported browser

为了获得更好的浏览体验,我们强烈建议您使用较新版本的 Chrome、 Firefox、 Safari 等,或者升级到最新版本的IE浏览器。 如果您使用的是 IE 11 或以上版本,请关闭“兼容性视图”。
react-native-refresh-list-view首页、文档和下载 - 上拉、下拉刷新组件 - 开源中国社区
全部项目分类
我要评价
MIT
JavaScript
跨平台
素敌
分享
收藏
4 人收藏
收录时间:2017-08-16
react-native-refresh-list-view 详细介绍

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

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

截图

  • 下拉刷新

  • 上拉翻页

  • 已加载全部数据

安装

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]] }
react-native-refresh-list-view

选择将代码托管在码云
你还在等什么

可能是中国最大最好的代码托管平台


大家对 react-native-refresh-list-view 的评论 (全部 0 条评论)
{{repayCom.userName}}
顶部