rnr
@landandan/react-native-refresh-list-view
npm i @landandan/react-native-refresh-list-view
rnr

@landandan/react-native-refresh-list-view

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

by Jayden Liu

1.0.10 (see all)License:MITTypeScript:Not Found
npm i @landandan/react-native-refresh-list-view
Readme

react-native-refresh-list-view

一个基于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

Example


constructor(props) {
    super(props)

    this.state = {
        refreshState: RefreshState.Idle,
    }
}

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})

// 服务器没有数据
this.setState({refreshState: RefreshState.EmptyData})

Props

PropTypeDescriptionDefault
refreshStatenumber列表刷新状态:
1、Idle(普通状态)
2、HeaderRefreshing(头部菊花转圈圈中)
3、FooterRefreshing(底部菊花转圈圈中)
4、NoMoreData(已加载全部数据)
5、Failure(加载失败)
None
onHeaderRefresh(refreshState: number) => void下拉刷新回调方法
refreshState参数值为RefreshState.HeaderRefreshing
None
onFooterRefresh(refreshState: number) => void上拉翻页回调方法
refreshState参数值为RefreshState.FooterRefreshing
None
dataArray同FlatList中的data属性None
footerContainerStyle?Object自定义底部容器样式None
footerTextStyle?Object自定义底部文字样式None
footerRefreshingText?string自定义底部刷新中文字'数据加载中…'
footerFailureText?string自定义底部失败文字'点击重新加载'
footerNoMoreDataText?string自定义底部已加载全部数据文字'已加载全部数据'
footerEmptyDataText?string自定义服务器没有数据文字'暂时没有相关数据'

常见问题

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

具体错误见官方issue。 解决方案:使用图片缓存库react-native-cached-image

最后

如果喜欢,请顺手我一个star,非常感谢~ :)

Downloads/wk

4

GitHub Stars

642

LAST COMMIT

2yrs ago

MAINTAINERS

1

CONTRIBUTORS

2

OPEN ISSUES

14

OPEN PRs

13
VersionTagPublished
1.0.10
latest
4yrs ago
No alternatives found
No tutorials found
Add a tutorial