react-native-refresh-list-view 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
react-native-refresh-list-view 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
react-native-refresh-list-view 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」 !
react-native-refresh-list-view 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」「最积极运营项目」 !
react-native-refresh-list-view 获得 2020 年度 OSC 中国开源项目评选「最积极运营项目」 !

软件简介

初学 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]] }
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (0)

加载中
更多评论
暂无内容
2018/09/25 17:40

React Native的View组件

React Native的View组件和Flexbox的使用 在看view组件之前,我们先了解下JSX语法,React核心机制之一是虚拟DOM,可以在内存中创建虚拟的DOM元素,通过对DOM的模拟,最大限度地减少与DOM的交互。 例子: var btn=document.createElement("BUTTON"); btn.className = 'btn'; var t=document.createTextNode("CLICK ME"); t.className = 't'; btn.appendChild(t) 但是虚拟DOM可读性不那么好,React就发明了JSX,就是我们熟悉的HTM...

0
0
发表了博客
2019/03/20 10:31

react native react-native-parallax-scroll-view的api

<ParallaxScrollView backgroundColor="transparent" contentBackgroundColor="transparent" headerBackgroundColor="#333" stickyHeaderHeight={40} parallaxHeaderHeight={250} backgroundSpeed={10} //设置头部背景图片 renderBackground={() => ( <View key="background"> <Image source={require('../../assets/home/de.png')} imageStyle={{resi...

0
0
发表了博客
2018/03/20 16:40

react-native-scrollable-tab-view

用于滑动tab的切换。git上地址:https://github.com/sooglejay/react-native-scrollable-tab-view 原文链接:https://www.jianshu.com/p/b7788c3d106e 1.执行npm install react-native-scrollable-tab-view --save,添加到项目。 Props介绍renderTabBar(Function:ReactComponent) TabBar的样式,系统提供了两种默认的,分别是DefaultTabBar和ScrollableTabBar。当然,我们也可以自定义一个,我们会在下篇文章重点讲解如何去自定...

0
0
发表了博客
2016/10/17 14:30

react-native 自定义原生view事件

react-native文档未更新,照着文档实现还是坑了不少,记录下基本步骤。 1,继承实现com.facebook.react.uimanager.events.Event类MyEvent getViewTag:接受事件view,传view.getId() getEventName:事件名称 dispatch:产生方法 @Override public void dispatch(RCTEventEmitter rctEventEmitter) { rctEventEmitter.receiveEvent(getViewTag(), getEventName(), serializeEventData()); } 2,在ViewManager必须实现方法getEx...

0
0
2017/10/31 11:17

react-native-scrollable-tab-view 自定制 tabBar

react-native-scrollable-tab-view 自定制 tabBar [http://www.jianshu.com/p/b0cfe7f11ee7](http://www.jianshu.com/p/b0cfe7f11ee7)

0
0
发表于大前端专区
2016/12/19 14:36

ReactNative组件-react-native-scrollable-tab-view

国际惯例,先引用: import ScrollableTabView, {DefaultTabBar,ScrollableTabBar} from 'react-native-scrollable-tab-view'; DefaultTabBar样式为:蓝色下横杠,蓝色选中文字,黑色默认文字,白色背景,平铺整个宽度: ScrollableTabBar样式为,蓝色下横杠,蓝色选中文字,黑色默认文字,白色背景,可水平滚动: demo: var App = React.createClass({ render() { return ( <ScrollableTabView renderTabBar={(pr...

0
0
发表了博客
2018/08/28 22:36

react-native-scrollable-tab-view 实现 TabBar

1.创建组件 src/components/CustomTabBar/index.js /** * 自定义选项卡 */ import React, {Component} from 'react'; import { Platform, StyleSheet, StatusBar, View, TouchableOpacity, Image, Text, } from 'react-native'; //第三方插件 import PropTypes from 'prop-types'; //自定义组件 import Common from '../../common'; //公共类 // 图片资源 import { images } from '../../res...

0
0
发表了博客
2018/08/30 20:09

React-Native之截图组件view-shot的介绍与使用

React-Native之截图组件view-shot的介绍与使用 一,需求分析 1,需要将分享页生成图片,并分享到微信好友与朋友圈。 二,react-native-view-shot介绍 1,可以截取当前屏幕或者按照当前页面的组件来选择截取,如当前页面有一个图片组件,一个View组件,可以选择截取图片组件或者View组件。支持iOS和安卓。 2,如需要截取ScrollView,只需要将”full”传递给snapshot方法即可。 captureRef方法和captureScreen方法都可以设置options,o...

0
0
发表了博客
2019/05/08 15:21

[RN] React Native 使用 React-native-scrollable-tab-view 实现 类头条 新闻页头部 效果

React Native 使用 React-native-scrollable-tab-view 实现 类头条 新闻页效果 效果如下: 一、安装依赖 npm install react-native-scrollable-tab-view --save 安装后对应版本依赖如下: "dependencies": { "react": "16.8.3", "react-native": "0.59.5", "react-native-scrollable-tab-view": "^0.10.0", }, 二、实现代码 1)显示View代码 import React, {Component} from 'react'; import {Text, View} from 'react-nativ...

0
0
2019/12/06 13:39

react native

创建项目 npm install -g yarn react-native-cli 安装android sdk 配置android_home 添加platform-tools目录到path 创建项目react-native init 项目名称 项目初始化失败,配置如下 npm config set registry https://registry.npm.taobao.org npm config set disturl https://npm.taobao.org/dist 作者:星光幻灭 链接:https://www.jianshu.com/p/24a5b2a2498e 来源:简书 著作权归作者所有。商业转载请联系作者获得授权,非商业...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
0 评论
5 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部