ListView的onEndReached，在原生反應中，不能按預期工作

這是我對組件渲染的代碼。ListView的onEndReached，在原生反應中，不能按預期工作

render() { 
    let loadMore; 
    let hasMore = this.props.end && this.props.photos.length < this.props.end; 

    if (hasMore) { 
    loadMore = (
     <View style={globalStyles.ContChild}> 
     <Button 
      onPress={() => this.loadMoreItems()} 
      containerStyle={globalStyles.bottomButton} 
      style={globalStyles.buttonText} 
      > 
      Load more 
     </Button> 
     </View> 
    ); 
    } 

    return (
    <View> 
     <ListView 
     dataSource={this.ds.cloneWithRows(this.props.photos)} 
     renderRow={this._renderPhoto} 
     contentContainerStyle={{ 
      flexDirection: 'row', 
      flexWrap: 'wrap', 
      marginLeft: 4, 
     }} 
     enableEmptySections={true} 
     initialListSize={12} 
     pageSize={12 * 3} 
     onEndReached={hasMore ? (() => this.loadMoreItems()) : null} 
     onEndReachedThreshold="32" 
     /> 
     {loadMore} 
    </View> 
); 
}

意圖是ListView中，當滾動至底部，但32PX或更小，執行附加的數據負載。

現在數據加載通過一個標記爲「加載更多」的按鈕進行工作，因爲它是在render方法中的if條件中生成的。該按鈕被有條件地添加到View組件內部，正好在ListView下面。

當前，當您單擊該按鈕時，將執行loadMore()邏輯並相應地加載更多圖片。加載的數據是圖片列表（列表視圖是照片庫）。

我想通過使用onEndReached處理程序將列表視圖滾動到底部邏輯時刪除按鈕並使用。現在這兩個邏輯在我的系統中共存，但是由於我昨天開始使用onEndReached邏輯，即使使用閾值，也存在一個問題 - 即使使用閾值：

現在，onEndReached邏輯急切地執行，每個渲染週期（IIRC在數據改變時觸發新的渲染週期，並且數據在每次調用時改變），就好像每個渲染週期都認爲onEndReached應該觸發。但是：在任何情況下，listview都不會滾動到最後。它仍然在滾動的頂部。

我的目的：我不希望整個圖片被急切地加載，但是以滾動分頁的方式，即當到達滾動底部時，自動加載更多元素（不需要按下「加載更多」按鈕 - 因爲我會刪除那個按鈕 - 並且沒有急切的加載但是滾動）。

我的問題：我對這個事件做錯了什麼，我該如何解決？

來源

2016-06-28 Luis Masuelli

你解決了你的問題嗎？ –

你可以試試這個：

<ListView 
    ref={(listView) => { _listView = listView; }} 
    dataSource={this.ds.cloneWithRows(this.props.photos)} 
    renderRow={this._renderPhoto} 
    contentContainerStyle={{ 
     flexDirection: 'row', 
     flexWrap: 'wrap', 
     marginLeft: 4, 
    }} 
    enableEmptySections={true} 
    initialListSize={12} 
    pageSize={12 * 3} 
    onEndReached={hasMore ? (() => this.loadMoreItems()) : null} 
    onEndReachedThreshold="32" 
    />

我錯過了我的ListView使用的參考，併爲面臨同樣的問題。一旦我添加了這些，我的分頁工作正常。

來源

2017-04-23 09:50:35

ListView的onEndReached，在原生反應中，不能按預期工作

回答

相關問題