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

未知
JavaScript
Android
2015-04-03
叶秀兰

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

React Native Hacker News

代码示例:

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"
      />
    )
  }
})
加载中

评论(1)

GreatOS
GreatOS
代码有点out 效果不咋滴,还是建议:https://github.com/greatbsky/react-native-pull #react-native-refreshable-listview#

暂无资讯

暂无问答

react native Android 真正回收复用 RecyclerView/ListView

真正的 Android 回收复用 RecyclerView/ListView

2016/09/23 08:14
6.8K
2
React-Native学习资源

React-Native学习资源 目录 教程 React Native React.js ES6 系列教程 kai源APP 组件 工具 资源网站 业界讨论 教程 React Native React-Native专题系列文章不断更新ing(入门,组件,Api,kai源项...

2016/03/29 10:26
202
1
基于 React-Native 的高仿「ONE·一个」开源项目

「 ONE·一个」是由韩寒监制,原《独唱团》主创成员共同制作的一款文艺生活 APP 支持设备: Android 4.1+ and iOS 8.0+ 声明 该 APP 所用到的 API 均由 「 ONE · 一个」提供,本人采取非正常...

2016/10/31 19:42
169
0
react native listview性能优化

1.使用react-native-sglistview、react-native-gifted-listview 2.设置removeClippedSubviews 为true,子类需要添加样式overflow:'hidden' 3.设置拖动速率 decelerationRate 4.dataSource里的...

2016/11/19 02:08
79
0
React-Native学习资源

场景:React-Native学习资源

2016/03/27 02:16
358
1
React Native 简介:用 JavaScript 搭建 iOS 应用(2)

**【编者按】本篇文章的作者是 Joyce Echessa——渥合数位服务创办人,毕业于台湾大学,近年来专注于协助客户进行 App 软体以及网站开发。本篇文章中,作者介绍通过 React Native 框架构建一...

2015/08/12 20:08
123
0
ReactNative For Android 项目实战总结

版权声明:本文由王少鸣原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/159 来源:腾云阁 https://www.qcloud.com/community Android Qzone 6.1版本在情...

2016/11/05 14:46
56
0
如何用 React Native 创建一个iOS APP?(三)

前两部分,《[如何用 React Native 创建一个iOS APP?](http://news.oneapm.com/react-native-ios-app/)》,《[如何用 React Native 创建一个iOS APP (二)?](http://news.oneapm.com/reac...

2016/01/18 15:46
77
4
React Native初探

React Native初探 前言 很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP,在可控的范围内,我们可以在上...

02/20 17:04
34
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部