Nauseating Pumpkin Mush

    react-native-listview-refresh

    0.6.2 • Public • Published

    react-native-listview-refresh

    一个基于FlatList的列表下拉、上拉刷新控件。代码一共100多行,尽量写得简单易懂,方便各位根据自己的需求随意修改。 如果有bug或建议,欢迎提issue。

    安装

    Yarn

    $ yarn add react-native-listview-refresh

    手动安装

    下载源码,将RefreshListView.js拖入工程中

    运行Demo

    第一步

    进入Example目录,执行:

    yarn install

    第二步

    react-native run-ios

    Example

     
    constructor(props) {
      super(props)
     
      this.state = {
        refreshState: RefreshState.Idle,
      }
    }
     
    render() {
      return (
        <RefreshListView
          data={this.state.dataList}
          keyExtractor={this.keyExtractor}
          renderItem={this.renderCell}
     
          refreshState={this.state.refreshState}
          onHeaderRefresh={this.onHeaderRefresh}
          onFooterRefresh={this.onFooterRefresh}
        />
      )
    }
     
    // 开始下拉刷新
    this.setState({refreshState: RefreshState.HeaderRefreshing})
     
    // 开始上拉翻页
    this.setState({refreshState: RefreshState.FooterRefreshing})
     
    // 加载成功
    this.setState({refreshState: RefreshState.Idle})
     
    // 加载失败
    this.setState({refreshState: RefreshState.Failure})
     
    // 加载全部数据
    this.setState({refreshState: RefreshState.NoMoreData})
     
    // 服务器没有数据
    this.setState({refreshState: RefreshState.EmptyData})

    Props

    Prop Type Description Default
    refreshState number 列表刷新状态:
    1、Idle(普通状态)
    2、HeaderRefreshing(头部菊花转圈圈中)
    3、FooterRefreshing(底部菊花转圈圈中)
    4、NoMoreData(已加载全部数据)
    5、Failure(加载失败)
    None
    onHeaderRefresh (refreshState: number) => void 下拉刷新回调方法
    refreshState参数值为RefreshState.HeaderRefreshing
    None
    onFooterRefresh (refreshState: number) => void 上拉翻页回调方法
    refreshState参数值为RefreshState.FooterRefreshing
    None
    data Array 同FlatList中的data属性 None
    footerRefreshingText ?string 自定义底部刷新中文字 '数据加载中…'
    footerFailureText ?string 自定义底部失败文字 '点击重新加载'
    footerNoMoreDataText ?string 自定义底部已加载全部数据文字 '已加载全部数据'
    footerEmptyDataText ?string 自定义空数据文字 '暂时没有相关数据'
    footerRefreshingComponent ?any 自定义底部刷新控件 null
    footerFailureComponent ?any 自定义底部失败控件 null
    footerNoMoreDataComponent ?any 自定义底部已加载全部数据控件 null
    footerEmptyDataComponent ?any 自定义空数据控件 null

    Install

    npm i react-native-listview-refresh

    DownloadsWeekly Downloads

    3

    Version

    0.6.2

    License

    MIT

    Unpacked Size

    12.7 kB

    Total Files

    7

    Last publish

    Collaborators

    • youngjuning