文档章节

使用react-native-pull实现跨平台Android&IOS下拉刷新滑动回弹效果

GreatOS
 GreatOS
发布于 2016/07/30 16:24
字数 469
阅读 84
收藏 0
点赞 0
评论 0

react-native-pull

GitHub项目地址:https://github.com/greatbsky/react-native-pull

 

PullView & PullList是两个实现下拉刷新的react native组件,可支持android & ios,简单易用!

纯js代码,基于ScrollView & ListView封装. 比scrollview & ListView更强大,有三个下拉状态:pulling, pullok, pullrelease. PullView可以让你使用refreshControl或提供的相关属性实现类似于scrollview的pull-to-refresh. PullList可以让你使用ListView的所有属性。

PullView Demo

PullView & PullList 实例项目: https://github.com/greatbsky/react-native-pull-demo

PullView 使用方法

  1. 执行npm install react-native-pull --save
  2. 编写代码:

    import {PullView} from 'react-native-pull';
    
    onPullRelease(resolve) {
      //do something
      resolve();
    }
    
    <PullView onPullRelease={this.onPullRelease}>
    //sth...
    </PullView>
    
  3. 完整代码: https://github.com/greatbsky/react-native-pull-demo/blob/master/PullViewDemo/app.js

PullList Demo

PullList 使用方法

  1. 执行 npm install react-native-pull --save
  2. 编写代码:

      import {PullList} from 'react-native-pull';
    
      onPullRelease(resolve) {
        //do something
        resolve();
      }
    
      <PullList onPullRelease={this.onPullRelease} {...and some ListView Props}/>
    
  3. 完整代码: https://github.com/greatbsky/react-native-pull-demo/blob/master/PullListDemo/app.js

更多配置项

PullView & PullList 下拉效果属性

  1. style: 设置组件样式,比如可以设置width/height/backgroudColor等
  2. onPulling: 处于pulling状态时执行的方法
  3. onPullOk: 处于pullok状态时执行的方法
  4. onPullRelease: 处于pullrelease状态时执行的方法
  5. topIndicatorRender: 顶部刷新指示组件的渲染方法, 接受三个参数: ispulling, ispullok, ispullrelease
  6. topIndicatorHeight: 顶部刷新指示组件的高度, 若定义了topIndicatorRender则同时需要此属性
  7. isPullEnd: 是否已经下拉结束,若为true则隐藏顶部刷新指示组件,非必须

    PullView支持普通refreshcontrol的相关属性

  • onRefresh: 开始刷新时调用的方法
  • refreshing: 指示是否正在刷新

Licensed

MIT License

© 著作权归作者所有

共有 人打赏支持
GreatOS

GreatOS

粉丝 2
博文 4
码字总数 5702
作品 2
海淀
实现下拉刷新滑动回弹效果组件--React-Native-Pull

react-native-pull react-native-pull包含PullView & PullList两个实现下拉刷新滑动回弹效果的react native组件,可支持android & ios,简单易用! 纯s代码,基于ScrollView & ListView封装....

GreatOS ⋅ 2016/08/01 ⋅ 0

下拉刷新react native组件--react-native-pullview

这是一个实现下拉刷新的react native组件,可支持android & ios,简单易用! 纯js代码,基于ScrollView封装. 比scrollview更强大,有三个下拉状态: pulling, pullok, pullrelease. 还可以使用...

匿名 ⋅ 2016/07/28 ⋅ 1

关于下拉刷新项目中所需要的功能(无痕过渡、loadingview出现方式、边界回弹)

PullRefreshLayout 首先吐槽一下现在流行的刷新库,一个字大,包涵个人很多集成到项目中不需要的类,也很难找到很满意的效果(无痕过渡,回弹的效果不够真实),所以自己自己动手丰衣足食,撸一...

北纬34点8度 ⋅ 2017/07/08 ⋅ 0

BetterScroll:可能是目前最好用的移动端滚动插件

作者:付楠 BetterScroll 是一款重点解决移动端各种滚动场景需求的开源插件(GitHub地址),适用于滚动列表、选择器、轮播图、索引列表、开屏引导等应用场景。 为了满足这些场景,它不仅支持...

滴滴WebApp架构组 ⋅ 2017/10/10 ⋅ 0

【Android】打造下拉放大效果

前言 在其他App上看到了这样的一个效果,感觉有点意思,于是决定实现一个类似的效果。 (其实是iOS的同学在是现功能的时候秀了一波操作) 效果大概是这样子的: UI看完后 “这个效果不错啊”...

带心情去旅行 ⋅ 06/19 ⋅ 0

React Native支持任意组件实现下拉刷新功能,并且可以自定义下拉刷新头部

1.背景   无论是Android还是ios,下拉刷新都是一个很有必要也很重要的功能。那么在RN(以下用RN表示React Native)之中,我们该如何实现下拉刷新功能呢?RN官方提供了一个用于ScrollView,Li...

请叫我百米冲刺 ⋅ 2017/06/22 ⋅ 0

树朾/SmartRefreshLayout

Android智能下拉刷新框架-SmartRefreshLayout English | 中文 正如名字所说,SmartRefreshLayout是一个“聪明”或者“智能”的下拉刷新布局,由于它的“智能”,它不只是支持所有的View,还支...

树朾 ⋅ 2017/08/04 ⋅ 0

那些年不容错过的智能下拉刷新加载框架

一些值得学习的几个下拉刷新上拉加载开源库 功能齐全的AnimRefreshRecyclerView 根据列表的不同效果选择不同的布局管理器 根据不同的布局管理器设置分割线: 设置Header和Footer 手动刷新 An...

codeGoogle ⋅ 2017/09/26 ⋅ 0

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

初学 React Native,看到 Github 上现有的相关控件实现都较为复杂,又不太符合自己心中想要的样子。于是自己做了一个简单的列表下拉、上拉刷新控件。列表使用的是 FlatList。 控件的实现非常...

素敌 ⋅ 2017/08/16 ⋅ 0

使用SwipeRefreshLayout和RecyclerView实现仿“简书”下拉刷新和上拉加载

一、概述 我们公司目前开发的所有Android APP都是遵循iOS风格设计的,这并不是一个好现象。我决定将Android 5.x控件引入最近开发的项目中,使用RecyclerView取代以往使用的ListView、GridV...

you缘么 ⋅ 2016/04/29 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

vue-cli是什么?

vue-cli是什么? vue-cli 是vue.js的脚手架,用于自动生成vue.js+webpack的项目模板,分为vue init webpack-simple 项目名 和vue init webpack 项目名 两种。 当然首先你的安装vue,webpack...

韦姣敏 ⋅ 24分钟前 ⋅ 0

12c rman中输入sql命令

12c之前版本,要在rman中执行sql语句,必须使用sql "alter system switch logfile"; 而在12c版本中,可以支持大量的sql语句了: 比如: C:\Users\zhengquan>rman target / 恢复管理器: Release 1...

tututu_jiang ⋅ 30分钟前 ⋅ 0

java 线程池

概述 减少了创建和销毁线程的次数,每个工作线程都可以被重复利用,可执行多个任务 可以根据系统的承受能力,调整线程池中工作线线程的数目,防止因为因为消耗过多的内存,而把服务器累趴下(...

轨迹_ ⋅ 35分钟前 ⋅ 0

Nginx的https配置记录以及http强制跳转到https的方法梳理

Nginx的https配置记录以及http强制跳转到https的方法梳理 一、Nginx安装(略) 安装的时候需要注意加上 --with-httpsslmodule,因为httpsslmodule不属于Nginx的基本模块。 Nginx安装方法: ...

Yomut ⋅ 47分钟前 ⋅ 0

SpringCloud Feign 传递复杂参数对象需要注意的地方

1.传递复杂参数对象需要用Post,另外需要注意,Feign不支持使用GetMapping 和PostMapping @RequestMapping(value="user/save",method=RequestMethod.POST) 2.在传递的过程中,复杂对象使用...

@林文龙 ⋅ 48分钟前 ⋅ 0

如何显示 word 左侧目录大纲

打开word说明文档,如下图,我们发现左侧根本就没有目录,给我们带来很大的阅读障碍 2 在word文档的头部菜单栏中,切换到”视图“选项卡 3 然后勾选“导航窗格”选项 4 我们会惊奇的发现左侧...

二营长意大利炮 ⋅ 52分钟前 ⋅ 0

智能合约编程语言Solidity之线上开发工具

工具地址:https://ethereum.github.io/browser-solidity/ 实例实验: 1.创建hello.sol文件 2.调试输出结果

硅谷课堂 ⋅ 53分钟前 ⋅ 0

ffmpeg 视频格式转换

转 Mp4 格式 #> ffmpeg -i input.avi -c:v libx264 output.mp4#> ffmpeg -i input.avi -c:v libx264 -strict -2 output.mp4#> ffmpeg -i input.avi -c:v libx264 -strict -2 -s 1......

Contac ⋅ 今天 ⋅ 0

VCS仿真生成vpd文件(verilog)

VCS仿真生成vpd文件(verilog): https://www.cnblogs.com/OneFri/p/5987673.html SYNOPSYS VCS常用命令使用详解 https://blog.csdn.net/hemmingway/article/details/49382551 DVE是synopsys公......

whoisliang ⋅ 今天 ⋅ 0

Spring Boot启动配置原理

几个重要的事件回调机制 配置在META-INF/spring.factories ApplicationContextInitializer SpringApplicationRunListener 只需要放在ioc容器中 ApplicationRunner CommandLineRunner 启动流程......

小致dad ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部