实现下拉刷新滑动回弹效果组件 React-Native-Pull

软件介绍

react-native-pull

react-native-pull包含PullView & PullList两个实现下拉刷新滑动回弹效果的react native组件,可支持android & ios,简单易用!

纯s代码,基于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. : 设置组件样式,比如可以设置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

本文地址:https://www.codercto.com/soft/d/5909.html

Pro JavaScript Techniques

Pro JavaScript Techniques

John Resig / Apress / 2006-12-13 / USD 44.99

Pro JavaScript Techniques is the ultimate JavaScript book for the modern web developer. It provides everything you need to know about modern JavaScript, and shows what JavaScript can do for your web s......一起来看看 《Pro JavaScript Techniques》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具