React Native - Listview Pull-down, um mehrmals zu aktualisieren Feuer

Question

Ich versuche, die OnScroll-Funktion für ListView zu verwenden, um zu überprüfen, wenn ein Benutzer die Liste nach einem bestimmten Pixelwert ausgelöst hat, um einen AJAX-Aufruf auszulösen und die Liste zu aktualisieren. Es wird jedoch mehrmals ausgelöst, was zu einer ruckartigen Animation des Aktivitätsindikators führt.

Scheint zu passieren, weil e.nativeEvent.contentOffset.y < -50 während des Pull-Down und Release so häufig überprüft wird. Gibt es eine bessere Möglichkeit, eine Pull-Down-Aktualisierung in ListView durchzuführen oder besser mit dem Spinner umzugehen? Dank

_handleScrollView(e) { 
    if (e.nativeEvent.contentOffset.y < -50 && !this.props.listingsLoading) { 
     // sets listsLoading to false when complete 
     this.props.fetchListings() 
    } 
    } 

    _renderLoadingView() { 
    if (this.props.listingsLoading) { 
     return (
     <ActivityIndicatorIOS /> 
    ); 
    } 
    } 

    render() { 
    var listings = this.state.dataSource 

    return (
     <View> 
     {this._renderLoadingView()} 
     <ListView 
      onScroll={this._handleScrollView} 
      dataSource={listings} 
      renderRow={this._renderRow} /> 
     </View> 
    ) 
    } 

EDIT: Ich habe folgendes es zum Laufen zu bringen RefreshControl verwenden, Dank David!

  <ListView 
       refreshControl={ 
       <RefreshControl 
        refreshing={this.state.isRefreshing} 
        onRefresh={this._onRefresh} 
        tintColor="#ff0000" 
        colors={['#ff0000', '#00ff00', '#0000ff']} 
        progressBackgroundColor="#ffff00" 
       /> 
       } 
       dataSource={listings} 
       renderRow={this._renderRow}/> 

definiert dann eine OnRefresh Funktion:

_onRefresh() { 
    this.setState({isRefreshing: true}); 
    this.props.fetchListings(this.props.nextPage) 
    setTimeout(() => { 
     this.setState({ 
     isRefreshing: false 
     }); 
    }, 3000); 
    } 

Answer 1

Sie sollten die build-in Refresh Control für Pull verwenden Funktionalität zu aktualisieren.