Newtonian Physics Mockumentary

    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

    Install

    npm i react-native-flatlist-pull

    DownloadsWeekly Downloads

    2

    Version

    1.0.5

    License

    MIT

    Unpacked Size

    452 kB

    Total Files

    65

    Last publish

    Collaborators

    • fuxiang123