react-native-flatlist-pull

1.0.5 • Public • Published

react-native-flatlist-pull

react-native-flatlist-pull是一个基于FlatList,支持Android和iOS的下拉刷新列表组件。是在另一个项目react-native-pull的基础上进行修改而成。主要将原项目中已经过时的ListView替换成较新的FlatList,同时去掉了原项目中存在BUG的PullView。

PullList 使用

  1. 使用npm:npm install react-native-flatlist-pull@latest --save
    使用yarn:yarn add react-native-flatlist-pull
  2. 编写代码:
  import {PullList} from 'react-native-pull';

  onPullRelease(resolve) {
    //do something
    setTimeout(() => {
          resolve();
      }, 3000);
  }
  
  <PullList
    onPullRelease={this.onPullRelease}
    // topIndicatorRender={this.topIndicatorRender}
    topIndicatorHeight={60}
    isRefreshing={this.state.isRefreshing}
    
    {...and some FlatList Props}
  />
  1. 完整示例代码:Example

更多配置项

PullList 下拉效果属性

  • style: 设置组件样式,比如可以设置width/height/backgroudColor等
  • onPulling: 处于pulling状态时执行的方法
  • onPullOk: 处于onPullOk状态时执行的方法
  • onPullRelease: 处于pullrelease状态时执行的方法
  • topIndicatorRender: 顶部刷新指示组件的渲染方法, 接受4个参数: ispulling, ispullok, ispullreleasegesturePosition,你可以使用gesturePosition定义动画头部.
  • topIndicatorHeight: 顶部刷新指示组件的高度, 若定义了topIndicatorRender则同时需要此属性
  • isPullEnd: 是否已经下拉结束,若为true则隐藏顶部刷新指示组件,非必须
  • isRefreshing: 标示下拉刷新状态的属性,同react-native官网FlatList中的属性refreshing作用类似。为true显示头部刷新指示器,为false则隐藏头部刷新指示器

PullList 上拉加载更多,可直接使用官网FlatList的属性onEndReachedonEndReachedThreshold进行实现,详情请见example

Licensed

MIT License

Package Sidebar

Install

npm i react-native-flatlist-pull

Weekly Downloads

1

Version

1.0.5

License

MIT

Unpacked Size

452 kB

Total Files

65

Last publish

Collaborators

  • fuxiang123