Reagieren indiaListView onEndReached nicht

Question

Ich möchte unendliche Scroll implementieren, so tun dies ich

renderRow(data){ 
    return (
     <CardSection> 
      <Text> 
       {data.id} 
      </Text> 
     </CardSection> 
    ); 
} 

<ListView 
    dataSource={this.dataSource} 
    renderRow={this.renderRow} 
    onEndReached = {this.loadMoreNews.bind(this)} 
    pageSize = {5} 
/> 

ich 5 Daten in meinem Listview-Tag jede Aktion holen nicht genannt, die ich in loadMoreNews() aufrufen und componentWillMount. Da die ersten 5 Daten nicht den gesamten Bildschirm ausfüllen, habe ich erwartet, dass OnEndReached automatisch aufgerufen wird, da es bereits am Ende der ListView ist, aber das tut es nicht.

Ich versuchte, den Text-Tag in renderRow in diesen

renderRow(data){ 
    return (
     <CardSection> 
      <Text style={{height:100}}> 
       {data.id} 
      </Text> 
     </CardSection> 
    ); 
} 

und es funktioniert, wie ich will, um Stil. Ich befürchte, dass meine renderRow nicht den gesamten Bildschirm ausfüllt, wenn meine Anwendung auf dem Breitbildgerät läuft.

Ist es das Verhalten von ListView oder habe ich etwas verpasst? Was ist die Lösung? Ich möchte meine Komponente nicht unbedingt sehr groß machen, damit sie immer den gesamten Bildschirm ausfüllt.

Answer 1

Sie könnten die Komponenteninhaltsgröße mit der Höhe des Geräts vergleichen und loadMoreNews fn aufrufen.

const deviceHeight = Dimensions.get('window').height; 

<ListView 
    dataSource={this.dataSource} 
    renderRow={this.renderRow} 
    onLayout={(event) => { 
     var layout = event.nativeEvent.layout; 
     if(layout.height < deviceHeight) this.loadMoreNews() 
    }} 
    onEndReached = {this.loadMoreNews.bind(this)} 
    pageSize = {5} 
/> 

Answer 2

onEndReached ?: Funktion

aufgerufen, wenn alle Zeilen gemacht wurden und die Liste hat innerhalb onEndReachedThreshold von unten gescrollt wurde. Das native Scroll-Ereignis wird bereitgestellt.

Es wird nicht automatisch aufgerufen, wenn der Benutzer die Listview (Wide-Screen-Szenario) nicht wischt.

Sie können set a threshold auslösen OnEndReached, ohne das untere Ende des Bildschirms zu erreichen.

onEndReachedThreshold: Anzahl

Threshold in Pixel (virtuell, nicht physisch) für den Aufruf onEndReached.

Alternativ, können Sie manuell loadMoreNews() aufrufen, wenn Ihr Bildschirm nicht vollständig durch Reihen abgedeckt ist. Um dies zu tun, messen Sie einfach die Höhe der CardSection-Komponente und teilen Sie Dimensions.get('window').height auf das, was Ihnen Anzahl CardSection-Komponenten gibt, die in den aktuellen Bildschirm passen.

Wenn Ihre Zeilen keine feste Höhe haben, die Sie kennen können, können Sie die Funktion onLayout verwenden.