React-native ListView pull-down refresh and pull the load implementation code,

React-native ListView pull-down refresh and pull the load implementation code,

This article describes how to pull and load a react-native ListView pull-down refresh. Share it with you as follows:

First look

Pull-down refresh

React Native provides a component to implement the RefreshControl method of pull-down refresh.

Usage

<ListView refreshControl={ <RefreshControl refreshing={this.state.refreshing} onRefresh={this._onRefresh.bind(this)} /> } //...</ListView>

When loading a view, set refreshing to true and set data loading to false.

Pull up and load

The onEndReached method in ListView is used. When ListView is rolled to the last Cell, the onEndReached method is triggered.

First add a Footer in ListView

Render () {const FooterView = this. state. loadMore? <View style = {styles. footer}> <Text style => load more... </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}/>}

Display Footer in method _ onEndReached. After the data is loaded, hide Footer.

_onEndReached() { this.setState({ loadMore: true, pageNo: this.state.pageNo + 1 }); this._fetchData(); }

Description

The ListView also sets the onEndReachedThreshold parameter to be used with onEndReached, which means that the critical value of the pixel is used with onEndReached, this is because the onEndReached sliding end flag uses this value as the judgment condition.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.