How to solve the problem of frequent triggering of react-native flatlist pull-up loading onEndReached

This time I will bring you react-How to solve the problem of frequent triggering of onEndReached in react-native flatlist pull-up loading. What are the precautions , the following is a practical case, let’s take a look.

Problem

When writing a flatlist reuse component, if the parent component is a component with a variable height when called, the component will not be displayed

If the parent component Style {flex: 1}, there will be problems with the pull-down method triggering frequently or abnormally (the problem I have here is that when the sixth item in the list is at the bottom, the slow pull-up will trigger the onEndReached listener of flatlist multiple times)

Reason

It is speculated that {flex: 1} is not suitable for the parent component style of dynamic height components, and will misjudge the height, causing onEndReached to be triggered abnormally multiple times.

Solution

You can make the required components above the list into headerAttributesThe incoming component is used as the header component of the flatlist, so that the encapsulated component can be called directly .

You can also set the style of the parent element to {height: '100%'}, so that the onEndReached listener can be correctly triggered.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to the php Chinese website Other related articles!

Recommended reading:

JavaScript Optimizing DOM

Vue’s Computed Properties

The above is the detailed content of How to solve the problem of frequent triggering of react-native flatlist pull-up loading onEndReached. For more information, please follow other related articles on the PHP Chinese website!