在React Native的FlatList中，如何在顶部（同时）在底部使用“拉动刷新”？

Question

I need in my React-Native app to have a Pull to refresh on the top of my FlatList and at the same time a Pull to refresh in the bottom of that FlatList. I can use refreshControl to use it at the top but I don't know what to do to put it in both top and bottom.

Answer 1

The FlatList component has predefined functions for that. As i understand you want to be able to refresh via pull to refresh and when you are reaching the end of the list? If so, you can do the following:

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 
/>