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

MIT
JavaScript
跨平台
2016-07-28
GreatOS

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

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

Demo

实例项目: https://github.com/greatbsky/react-native-pullview-demo

使用方法

  1. 执行npm install react-native-pullview --save

  2. 编写代码:

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

更多配置项

下拉效果属性

  1. onPulling: 处于pulling状态时执行的方法

  2. onPullOk: 处于pullok状态时执行的方法

  3. onPullRelease: 处于pullrelease状态时执行的方法

  4. topIndicatorRender: 顶部刷新指示组件的渲染方法, 接受三个参数: ispulling, ispullok, ispullrelease

  5. topIndicatorHeight: 顶部刷新指示组件的高度, 若定义了topIndicatorRender则同时需要此属性

  6. isPullEnd: 是否已经下拉结束,若为true则隐藏顶部刷新指示组件,非必须


普通refreshcontrol相关属性
  • onRefresh: 开始刷新时调用的方法

  • refreshing: 指示是否正在刷新

加载中

评论(1)

xmqywx
xmqywx
可以使用react native 自带的FlatList,实现该功能。并且还能实现一行多条的UI,比如图片浏览。

暂无资讯

暂无问答

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

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

2016/07/27 19:01
113
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
114
0
React-Native学习资源

React-Native学习资源 目录 教程 React Native React.js ES6 系列教程 kai源APP 组件 工具 资源网站 业界讨论 教程 React Native React-Native专题系列文章不断更新ing(入门,组件,Api,kai源项...

2016/03/29 10:26
125
1
react native 0.56.0

0.56.0 更新日志 能力有限,如有问题,请包涵(哈哈)原文请点击 欢迎 React Native 2018年6月份正式版的发布,超过53位捐献者提供797次提交,非常感谢你们每一位。 在您阅读本文的此刻,这个...

2018/07/17 14:39
75
0
React Native for Android 官方文档中文版(最新)全国首发

Facebook 于 2015 年 9 月 15 日发布了 React Native for Android, 把 Web 和原生平台的 JavaScript 开发技术扩展到了 Google 的流行移动平台--Android。极客学院 Wiki 团队(http://wiki.ji...

2015/09/18 14:26
205
1
React JS和React-Native新手学习指南

自己在学习React-Native过程中整理的一份学习指南,包含 教程、开源app和资源网站等,还在不断更新中。欢迎pull requests! React-Native学习指南 本指南汇集React-Native各类学习资源,给大...

2018/10/12 19:54
4
0
React Native ChangeLog 中文版收集

官方英文版 https://github.com/react-native-community/react-native-releases/blob/master/CHANGELOG.md react-native 0.57版本迁移教程 https://www.jianshu.com/p/cc0174b4a9c5 React N...

2018/09/16 18:06
6
0
React Native 常用组件包

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

2016/08/07 09:23
356
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部