OnEndReached in Flatlist Ausgabe

Question

Wenn ich die Flatlist in einer Ansicht beifügen dann löst meine onEndReached unendlich, wenn ich die umschließende View onEndReached wird überhaupt nicht ausgelöst.

render(){ 

    return (
     <Root> 
      <Container> 
        <Content>     
         <View> 
           {this.state.listView && 
            <FlatList 
            data={this.state.variants} 
            keyExtractor={this._keyExtractor} 
            onEndReachedThreshold={0.5} 
            onEndReached={({ distanceFromEnd }) => { 
             console.log('on end reached ', distanceFromEnd); 
             this.loadMore(); 
            }} 
            numColumns = {1} 
            renderItem={({item, index}) =><CatalogRow item={item} in_wishlist={this.state.in_wishlist} toggleWishlist={() => this.toggleWishlist(item.title)} listView={this.state.listView}/>} 
           />} 

          </View> 
        </Content> 
       </Container> 
      </Root> 
    ); 
    } 

Und meine distanceFromEnd nimmt Werte wie 0, 960,1200, wenn es trigerred wird. Was zeigt es an? Ich verwende reagieren-native 0.47.2

Answer 1

Es war beacuse des umschließenden <Content>-Tag. Manchmal führt das Einbetten von reaktiven nativen Tags mit nativen Basis-Tags zu solchen Problemen. Ich habe den Inhalt und Container-Tag durch View Tags ersetzt und jetzt funktioniert es gut.

Answer 2

ich es so verwenden würde:

handleMore =() => { 
    // fetch more here 
}; 

<FlatList 
    onEndReached={this.handleMore} 
/>