初学 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]] }-
功能 这是一个支持自定义的下拉刷新组件 这是一个支持自定义的上拉加载更多的组件 这是一个基于FlatList，SectionList组件。支持两者的可选配置 效果 gitHub地址: github.com/FreeBaiShun… npm集成 npm i react-native-bsrefresh-list-view npm i 用法 import React, {Component} from
-
首先 第一步 需要导入三方的类库 和跳转详情页面 yarn add react-native-refresh-list-view //导包 import RefreshListView, { RefreshState } from “react-native-refresh-list-view”; import React, { Component } from “react”; import {
-
写作时间：20年末或21年初吧具体时间记不得了 React-Native版本：0.63.2 目标平台：Android、iOS FlatList是RN中的一个重要组件，打算做一个系列，对其使用方法和注意事项进行系统的学习整理，这期主要是记录keyExtractor的若干使用场景和对应现象 情景1： 父组件维护一组复杂的列表数据，其中keyExtractor取列表中每一项的key值，当点击按钮之后，数
-
最近学RN也大概有两个礼拜了。紧跟上篇总结ReactNative一些基础知识再总结下学习RN的笔记。 前言 学习RN，最好的学习办法就是看官方文档，里面有很详细的资料。 环境搭建 开发RN，Atom+Nuclide还是不错的选择。 Atom下载地址 安装Nuclide $ git clone https://github.com/facebook/nuclide.git $ cd nuclide
-
#1.前言 react-native 上下拉加载的控件效果都不好，找了半天没找到，正打算自已封装的时候，无意中找到了一个比较好的控件，大家看一下： react-native-refresh-list-view 这个是基于flatlist封装的，效果还不错，大家可以用一下。 #2.结尾 加油吧！
-
配置路由器 import { createTabNavigator, createStackNavigator } from "react-navigation"; import New1 from "./New1"; import New2 from "./New2"; import Web from "../Web"; const Route2 = createTabNavigator({
-
1.封装 Scroller 组件 src/components/Scroller/index.js /** * 下拉刷新/上拉加载更多 组件(Scroller) */ import React, {Component} from 'react'; import { StyleSheet, Text, View, ListView, ActivityIndicator,
-
这几天项目里有这么个需求：一个列表页需要支持下拉刷新和上拉刷新。 其中上拉刷新效果已经实现，具体思路见：《React-Native系列》19、 ListView组件之上拉刷新（iOS和Android通用） 今天我们重点来说说下拉刷新的实现。 ReactNative提供一个组件RefreshControl，但是不支持自定义刷新UI，我们的RN项目只是整个APP的一部分，需要和原生的UI保持一致，所以
-
ReactNative自定义控件之 RefreshLayout 1 自定义下拉刷新控件 //自定义的下拉刷新控件 public class PullToRefreshView extends ViewGroup { ... public PullToRefreshView(Context context) { ... } publi
-
FlatList是ReactNative高性能的简单列表组件。本文只探讨onViewableItemsChanged属性使用，这里不过多介绍，官方文档https://reactnative.cn/docs/flatlist/。 1.需求背景：FlatList列表滚动时，监听当前那些数据item在可见范围内。这时就需要FlatList的onViewableItemsChanged。使用onViewa
-
1·定义组件 PageListView.js /** * 上拉刷新/下拉加载更多 组件 */ import React, { Component } from 'react'; import { Text, View, ListView, FlatList, Dimensions, PanResponder, Animated, Easing, Activ
-
本文向大家介绍React Native中的RefreshContorl下拉刷新使用，包括了React Native中的RefreshContorl下拉刷新使用的使用技巧和注意事项，需要的朋友参考一下 我们知道App中都有下拉加载，在React Native中也有类似的控件 一、属性方法 （1） onRefresh function 在视图开始刷新的时候调用 （2） refreshing bool
-
本文向大家介绍Listloading.js移动端上拉下拉刷新组件，包括了Listloading.js移动端上拉下拉刷新组件的使用技巧和注意事项，需要的朋友参考一下 listloading是一个移动端的上拉、下拉加载更多的组件。主要依赖于iscroll.js v5.1.2基础上开发的组件，基础库可以使用jquery.js或者zepto.js操作dom节点，目前我是使用了zepto.js作为基础库操作
-
本文向大家介绍RecyclerView下拉刷新上拉加载，包括了RecyclerView下拉刷新上拉加载的使用技巧和注意事项，需要的朋友参考一下 一 、前言 最近实在太忙，一个多礼拜没有更新文章了，于是今晚加班加点把demo写出来，现在都12点了才开始写文章。 1.我们的目标 把RecyclerView下拉刷新上拉加载更多加入到我们的开发者头条APP中。 2.效果图 3.实现步骤 找一个带上拉刷新下
-
下拉刷新是一个特别的组件，可以用来初始化页面内容的刷新。 下拉刷新的demo <header class="bar bar-nav"> <h1 class='title'>下拉刷新</h1> </header> <!-- content应该拥有"pull-to-refresh-content"类,表示启用下拉刷新 --> <div class="content pull-to-re
-
下拉刷新是一个特别的组件，可以用来初始化页面内容的刷新。 下拉刷新的HTML布局结构 让我们来看一下如何把下拉刷新组件集成到页面中： <div class="page"> <!-- Page content应该拥有"pull-to-refresh-content"类 --> <div class="page-content pull-to-refresh-content" data-ptr
-
Page.onPullDownRefresh() 在 Page 中定义 onPullDownRefresh 处理函数，监听该页面用户下拉刷新事件 jd.startPullDownRefresh(Object object) 开始下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致 OBJECT 参数说明： 参数 类型 必填 说明 success Function 否 接口调用成功的回调函数