下拉刷新组件 react-native-refreshable-listview

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/phj_88/article/details/82177329

react-native-refreshable-listview 是下拉刷新 ListView，当数据重载的时候显示加载提示。

代码示例：

var React = require('react-native')
var {Text, View, ListView} = React
var ArticleStore = require('../stores/ArticleStore')
var StoreWatchMixin = require('./StoreWatchMixin')
var ArticleView = require('./ArticleView')
var RefreshableListView = require('./RefreshableListView')
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1.id !== r2.id})
var ArticlesScreen = React.createClass({
  mixins: [StoreWatchMixin],
  getInitialState() {
    return {dataSource: ds.cloneWithRows(ArticleStore.all())}
  },
  getStoreWatches() {
    this.watchStore(ArticleStore, () => {
      this.setState({dataSource: ds.cloneWithRows(ArticleStore.all())})
    })
  },
  reloadArticles() {
    return ArticleStore.reload() // returns a promise of reload completion
  },
  renderArticle(article) {
    return <ArticleView article={article} />
  },
  render() {
    return (
      <RefreshableListView
        dataSource={this.state.dataSource}
        renderRow={this.renderArticle}
        loadData={this.reloadArticles}
        refreshDescription="Refreshing articles"
      />
    )
  }
})

博主花大量时间和精力整理了大前端最新前端视频教程，省去大家找资源的时间

有兴趣的可以点击下方文字访问博主淘宝网（感谢支持）或直接联系博主QQ：184009766

点击我，支持博主，前端视频教程