本文介绍了react-native ListView下拉刷新上拉加载实现。分享给大家，具体如下：
先看效果图
下拉刷新
React Native提供了一个组件可以实现下拉刷新方法RefreshControl
使用方法
<ListView refreshControl={ <RefreshControl refreshing={this.state.refreshing} onRefresh={this._onRefresh.bind(this)} /> } //... </ListView> 在视图加载的时候的时候，将refreshing设置为true，数据加载完成设置为false即可
上拉加载
利用ListView里的onEndReached方法实现，ListView在滚动到最后一个Cell的时候,会触发onEndReached方法
先在ListView里添加一个Footer
render() { const FooterView = this.state.loadMore ? <View style={styles.footer}> <Text style=>加载更多...</Text> </View> : null; return <ListView refreshControl={ <RefreshControl refreshing={this.state.refreshing} onRefresh={this._onRefresh.bind(this)} /> } style={[styles.listView]} dataSource={ds.cloneWithRows(this.state.dataSource)} enableEmptySections={true} renderRow={this._renderRow.bind(this)} onEndReachedThreshold={5} onEndReached={this._onEndReached.bind(this)} renderFooter={() => FooterView} /> } 在方法_onEndReached里将Footer显示出来，在数据加载完成之后，再隐藏掉Footer
_onEndReached() { this.setState({ loadMore: true, pageNo: this.state.pageNo + 1 }); this._fetchData(); } 说明
ListView里还设置了一个参数onEndReachedThreshold这个参数与onEndReached配合使用，它的意思是：像素的临界值，该属性和onEndReached配合使用，因为onEndReached滑动结束的标志是以该值作为判断条件的
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持亿速云。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
