下拉刷新组件:react-native-refreshable-listview
fpcm
9年前
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" /> ) } })