上拉、下拉刷新组件 react-native-refresh-list-view

MIT
JavaScript
跨平台
2017-08-16
素敌

初学 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]] }
的码云指数为
超过 的项目
加载中

评论(0)

暂无评论

暂无资讯

暂无问答

RN总结

一、RN搭建开发环境 1.安装依赖软件: Node.js 8.3以上 D:\Program Files\nodejs\ Python 2.x以上 D:\Python27\ D:\Python27\Scripts JDK 1.8 Java_Home=C:\Program Files\Java\jdk1.8.0_65...

2018/09/24 15:10
6
0
react-native-page-listview使用方法(自定义FlatList/ListView下拉刷新,上拉加载更多,方便的实现分页)

react-native-page-listview 对ListView/FlatList的封装,可以很方便的分页加载网络数据,还支持自定义下拉刷新View和上拉加载更多的View.兼容高版本FlatList和低版本ListVIew.组件会根据你使用...

2018/10/06 20:21
67
0
react native Android 真正回收复用 RecyclerView/ListView

真正的 Android 回收复用 RecyclerView/ListView

2016/09/23 08:14
5.9K
2
react native 开发碰到的问题

react-navigation v2 问题 问题: static navigationOptions = ({navigation, navigationOptions}) => ({ headerTitle: ( <Text style={{color:"#fff"}}>我的</Text> ), headerRight: ( <View...

2018/08/18 22:15
99
0
Getting Started with AngularJS1.5 and ES6:part5

# Apply Container/Presenter pattern If you have used React, you could be fimilar with Container/Presenter pattern. The presenter component is responsive for rendering view and n...

2016/10/05 09:14
117
0
Mac指令集合

# 查看硬盘容量 du -h -d1 {path} # 查看分区容量 df -h # CocoaPods的安装 gem install cocoapods # git 指令 # 拉取代码 git clone {url} {folder} #获取端口占用 lsof -i TCP:8081 # npm...

2018/12/04 17:18
0
0
使用react-native-pull实现跨平台Android&IOS下拉刷新滑动回弹效果

react-native-pull包含PullView & PullList两个实现下拉刷新的react native组件,可支持android & ios,简单易用! 纯js代码,基于ScrollView & ListView封装. 比scrollview & ListView更强大...

2016/07/30 16:24
109
0
Setting up Automatic NDK Builds in Eclipse

When editing native JNI code in an Android project using the Android NDK you may configure Eclipse to automatically rebuild your project when editing native code, just as it doe...

2011/09/23 14:29
174
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部