Wie "Pull to Refresh" oben und (gleichzeitig) unten in einer FlatList in React Native zu verwenden?

Question

Ich brauche in meiner App "React-Native" einen Pull zum Aktualisieren oben auf meiner FlatList und gleichzeitig einen Pull zum Aktualisieren im unteren Bereich dieser FlatList. Ich kann refreshControl verwenden, um es oben zu verwenden, aber ich weiß nicht, was ich tun soll, um es oben und unten zu setzen.

Answer 1

Die FlatList-Komponente verfügt über vordefinierte Funktionen dafür. Wie ich verstehe, möchten Sie in der Lage sein, per Pull zu aktualisieren und wenn Sie das Ende der Liste erreichen zu aktualisieren? Wenn ja, können Sie wie folgt vorgehen:

handleRefresh =() => { 
//make api calls 
}; 

 

<FlatList 
    data={yourData} 
    onRefresh{this.handleRefresh} // handle pull to refresh 
    onEndReached={this.handleRefresh} // handle refresh 
    onEndReachedThreshold={1} // refresh as soon as the end of the list is reached. Probably you have to play around with this value 
    ListFooterComponent={this.renderFooter(this.props.loading)} // show activity indicator 
/>