上拉、下拉刷新组件 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)

暂无评论

暂无资讯

暂无问答

react native 开发碰到的问题

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

2018/08/18 22:15
884
0
React Native 之导航栏

一定要参考官网: https://reactnavigation.org/docs/en/getting-started.html 代码来自慕课网:https://www.imooc.com/course/list?c=reactnative 效果图: 流程: 1.新建项目 2.修改依赖 (一...

2019/08/31 22:09
16
0
React Native 常用第三方组件

React-Native-Elements 一组开发RN的UI工具包(强烈推荐) 🔥🔥🔥🔥🔥 react-native-calendars 🔥🔥🔥🔥 优秀的日历控件 apsl-react-native-button 定义了一个Button支持用...

2018/11/10 14:27
52
0
react-native项目经验

修改端口号:node_modules\react-native\local-cli\server\server.js 生成apk:react-native run-android --variant=release 编译项目:react-native start 声明样式:var styles=StyleSheet...

2019/01/10 11:22
20
0
React-Native之截图组件view-shot的介绍与使用

React-Native之截图组件view-shot的介绍与使用 一,需求分析 1,需要将分享页生成图片,并分享到微信好友与朋友圈。 二,react-native-view-shot介绍 1,可以截取当前屏幕或者按照当前页面的组件...

2018/08/30 20:09
35
0
react native 将View 生成图片 然后 保存在本地操作

首先将一个View 生成图片 废话不多说 直接上代码 主要用到 takeSnapshot 这个是react native 自带的 生成图片的组件takeSnapshot之前的写法是在UIManager中,新版本后放到了ReactNative模块中...

2018/07/06 17:04
27
0
React Native 常用组件包

兼容Android,iOS,经过开发实践,觉得不错,js.coach排名很靠前

2016/08/07 09:23
556
0
React Native Tutorial摘要(二)

###组件的宽和高 基本跟CSS一样使用,但要注意是放在style中的对象中,即{{}}。 ~~~ import React, { Component } from 'react'; import { AppRegistry, View } from 'react-native'; class ...

2016/07/23 18:24
12
0
[RN] React Native 使用 React-native-scrollable-tab-view 实现 类头条 新闻页头部 效果

React Native 使用 React-native-scrollable-tab-view 实现 类头条 新闻页效果 效果如下: 一、安装依赖 npm install react-native-scrollable-tab-view --save 安装后对应版本依赖如下: "d...

2019/05/08 15:21
101
0
react-native 轮播图 ——react-native-swiper使用

react-native-swiper的github地址 使用说明: 1. 先安装React-native-swiper <Swiper style={styles.swiper} height={200} horizontal={true} paginationStyle={{bottom...

2018/10/12 14:19
17
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部