❤
npm
Sign UpSign In

react-native-pull-to-refresh-list

1.0.3 • Public • Published

react-native-pull-to-refresh-list

npm npm npm npm

React Native 下拉刷新和上拉加载，IOS是用纯JS编写；Android是用纯JS和Java编写。解决了Android listview大数据下拉刷新效果体验。

此组件目前测试通过版本为 React Native 0.43，其他 React Native 各个版本暂未测试，望各位高手遇到兼容性问题，留言或者提问给我，我愿与你一起解决问题。

DEMO

安装

npm install react-native-pull-to-refresh-list --save

命令行配置 (Android)

react-native link react-native-pull-to-refresh-list

运行以上命令，还需要手动配置以下文件

  • In android/settings.gradle
...
maven {
    url "$rootDir/../node_modules/react-native/android"
}
maven { url "https://jitpack.io" }  //used for react-native-pull-to-refresh-list

手动配置 (Android)

  • In android/settings.gradle
...
include ':react-native-pull-to-refresh-list'
project(':react-native-pull-to-refresh-list').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-pull-to-refresh-list/android')
  • In android/build.gradle
...
maven {
    url "$rootDir/../node_modules/react-native/android"
}
maven { url "https://jitpack.io" }  //used for react-native-pull-to-refresh-list
  • In android/app/build.gradle
...
dependencies {
    ...
    // From node_modules
    compile project(':react-native-pull-to-refresh-list')
}
  • In MainApplication.java
...
import com.reactnativepulltorefresh.AppReactPackage;    //import package
...
/**
 * A list of packages used by the app. If the app uses additional views
 * or modules besides the default ones, add more packages here.
 */
@Override
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new AppReactPackage()  //register Module
    );
}
...

案例

see react-native-pull-to-refresh-list-demo

用法

import React, { Component } from 'react';
import {
    View,
    Text,
    StyleSheet,
    Alert,
    StatusBar,
    ScrollView,
    ListView,
    Image,
    ActivityIndicator,
    ProgressBarAndroid,
    ActivityIndicatorIOS,
    Platform,
    ToolbarAndroid
} from 'react-native'
import PullToRefreshListView from 'react-native-pull-to-refresh-list'
 
class PullToRefreshListViewDemo extends Component {
 
  // 构造 
  constructor(props) {
    super(props);
 
    this._dataSource = new ListView.DataSource({
    rowHasChanged: (r1, r2) => r1 !== r2,
    //sectionHeaderHasChanged: (s1, s2) => s1 !== s2, 
    });
 
    let dataList = []
 
    this.state = {
    first: true,
    dataList: dataList,
    dataSource: this._dataSource.cloneWithRows(dataList),
    }
  }
 
  componentDidMount() {
    this._pullToRefreshListView.beginRefresh()
  }
 
  //Using ListView 
  render() {
    let component = <PullToRefreshListView
      ref={(component) => this._pullToRefreshListView = component}
      viewType={PullToRefreshListView.constants.viewType.listView}
      contentContainerStyle={{}}
      style={{ flex: 1 }}
      initialListSize={20}
      enableEmptySections={true}
      dataSource={this.state.dataSource}
      pageSize={20}
      renderRow={this._renderRow}
      renderHeader={this._renderHeader}
      renderFooter={this._renderFooter}
      //renderSeparator={(sectionID, rowID) => <View style={style.separator} />} 
      onRefresh={this._onRefresh}
      onLoadMore={this._onLoadMore}
      pullUpDistance={35}
      pullUpStayDistance={50}
      pullDownDistance={35}
      pullDownStayDistance={50}
      autoLoadMore={true}
    />
 
 
    return (
      <View style={style.container}>
        {component}
      </View>
 
    )
 
  }
 
  _renderRow = (rowData, sectionID, rowID) => {
    return (
      <View style={style.thumbnail}>
        <Text>{rowData.text}</Text>
      </View >
    )
  }
 
  _renderHeader = (viewState) => {
    let { pullState, pullDistancePercent } = viewState
    let { refresh_none, refresh_idle, will_refresh, refreshing, } = PullToRefreshListView.constants.viewState
    pullDistancePercent = Math.round(pullDistancePercent * 100)
    switch (pullState) {
      case refresh_none:
        return (
          <View style={style.pull_down_refresh}>
            <Text style={style.pull_color}>刷新成功</Text>
          </View>
        )
      case refresh_idle:
        return (
          <View style={style.pull_down_refresh}>
            <Text style={style.pull_color}>下拉刷新{pullDistancePercent}%</Text>
          </View>
        )
      case will_refresh:
        return (
          <View style={style.pull_down_refresh}>
            <Text style={style.pull_color}>释放立即刷新{pullDistancePercent > 100 ? 100 : pullDistancePercent}%</Text>
          </View>
        )
      case refreshing:
        return (
          <View style={style.pull_down_refresh}>
            {this._renderActivityIndicator()}<Text style={style.pull_color}>正在刷新...</Text>
          </View>
        )
    }
  }
 
  _renderFooter = (viewState) => {
    let { pullState, pullDistancePercent } = viewState
    let { load_more_none, load_more_idle, will_load_more, loading_more, loaded_all, } = PullToRefreshListView.constants.viewState
    pullDistancePercent = Math.round(pullDistancePercent * 100)
    switch (pullState) {
      case load_more_none:
        return (
          <View style={style.pull_up_refresh}>
            <Text style={style.pull_color}>加载成功</Text>
          </View>
        )
      case load_more_idle:
        return (
          <View style={style.pull_up_refresh}>
            <Text style={style.pull_color}>上拉加载{pullDistancePercent}%</Text>
          </View>
        )
      case will_load_more:
        return (
          <View style={style.pull_up_refresh}>
            <Text style={style.pull_color}>释放立即加载{pullDistancePercent > 100 ? 100 : pullDistancePercent}%</Text>
          </View>
        )
      case loading_more:
        return (
          <View style={style.pull_up_refresh}>
            {this._renderActivityIndicator()}<Text style={style.pull_color}> 正在加载...</Text>
          </View>
        )
      case loaded_all:
        return (
          <View style={style.pull_up_refresh}>
            <Text style={style.pull_color}>我们已经到底啦！</Text>
          </View>
        )
    }
  }
 
  _onRefresh = () => {
    //console.log('outside _onRefresh start...') 
 
    //simulate request data 
    setTimeout(() => {
 
      //console.log('outside _onRefresh end...') 
      let addNum = 20
      let refreshedDataList = []
      for (let i = 0; i < addNum; i++) {
        refreshedDataList.push({
          text: `item-${i}`
        })
      }
 
      this.setState({
        dataList: refreshedDataList,
        dataSource: this._dataSource.cloneWithRows(refreshedDataList),
      })
      this._pullToRefreshListView.endRefresh()
 
    }, 500)
  }
 
  _onLoadMore = () => {
    //console.log('outside _onLoadMore start...') 
 
    setTimeout(() => {
 
      //console.log('outside _onLoadMore end...') 
 
      let length = this.state.dataList.length
      let addNum = 20
      let addedDataList = []
      if (length >= 100) {
        addNum = 3
      }
      for (let i = length; i < length + addNum; i++) {
        addedDataList.push({
          text: `item-${i}`
        })
      }
      let newDataList = this.state.dataList.concat(addedDataList)
      this.setState({
        dataList: newDataList,
        dataSource: this._dataSource.cloneWithRows(newDataList),
      })
 
      let loadedAll
      if (length >= 100) {
        loadedAll = true
        this._pullToRefreshListView.endLoadMore(loadedAll)
      }
      else {
        loadedAll = false
        this._pullToRefreshListView.endLoadMore(loadedAll)
      }
 
    }, 500)
  }
 
  _renderActivityIndicator() {
    return ActivityIndicator ? (
      <ActivityIndicator
        style={{ marginRight: 10, }}
        animating={true}
        color={'#666'}
        size={'small'} />
    ) : Platform.OS == 'android' ?
        (
          <ProgressBarAndroid
            style={{ marginRight: 10, }}
            color={'#666'}
            styleAttr={'Small'} />
 
        ) : (
          <ActivityIndicatorIOS
            style={{ marginRight: 10, }}
            animating={true}
            color={'#666'}
            size={'small'} />
        )
  }
}
 
const style = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f8f8f8'
  },
  thumbnail: {
    height: 56,
    borderBottomWidth: .5,
    borderBottomColor: 'rgba(0,0,0,.1)',
    justifyContent: 'center',
    alignItems: 'center'
  },
  pull_down_refresh: {
    flexDirection: 'row',
    height: 50,
    justifyContent: 'center',
    alignItems: 'center'
  },
  pull_up_refresh: {
    flexDirection: 'row',
    height: 50,
    justifyContent: 'center',
    alignItems: 'center'
  },
  pull_color: {
    color: '#666'
  }
 
})
 
export default PullToRefreshListViewDemo;

属性设置

Prop Type Optional Default Description
...ListView.propTypes see react-native documents
viewType enum Yes Symbol determines the viewType which will be used(ScrollView, ListView)
autoLoadMore bool Yes false when the value is true, pull up load more will be auto
onRefresh func Yes when refreshing, this function will be called
onLoadMore func Yes when loadingMore, this function will be called
onEndReachedThreshold number Yes 0 threshold in pixels (virtual, not physical) for calling onLoadMore
pullUpDistance number Yes 35 determines the pull up max distance
pullUpStayDistance number Yes 50 determines the pull up stay distance
pullDownDistance number Yes 35 determines the pull down max distance
pullDownStayDistance number Yes 50 determines the pull down stay distance
enabledPullUp bool Yes true when the value is false, pull up load more will be disabled
enabledPullDown bool Yes true when the value is false, pull down refresh will be disabled
listItemProps object Yes see react-native documents
renderRowWithVisibility bool Yes when the value is true, the children of the listRow can be controlled with 'hidden' state
pageTop number Yes 0 determines the top relative to the page of the float section header(sticky header) view
floatSectionHeaderWidth number Yes deviceWidth determines the width of the float section header(sticky header) view
renderFloatSectionHeader number Yes 0 determines the width of the float section header(sticky header) view
listSectionProps object Yes see react-native documents

感谢

Readme

Keywords

Package Sidebar

Install

npm i react-native-pull-to-refresh-list

Repository

github.com/Yuzi-me/react-native-pull-to-refresh-list

Homepage

github.com/Yuzi-me/react-native-pull-to-refresh-list#readme

Weekly Downloads

2

Version

1.0.3

License

ISC

Last publish

Collaborators

  • yuzi-me
Try on RunKit
Report malware