The problem:
I took over an RN project, and found a bug in the real machine test: the page of commodity list was pulled up to load more commodities, and more than 20 commodities were loaded. When the screen slid, obvious sense of frustration began to appear. Directly locate the commodity list and find that FlatList component is used, which is a lazy loading component of the list. Check it and find no problem. Then check the whole page and find that there is not only this list, but also exchange area, check-in area, search area, and a ScrollView component wrapped in the outer layer. Used for pull-down refresh… On the face of it, there’s nothing wrong. Later, I tried to comment out the outermost scroll component and, boy, the bug disappeared. Once you’ve located the bug, it’s time to figure out what to do about it.
To solve:
The FlatList component has all props of the ScrollView and can have a separate header component (ListHeaderComponent). Packaged together and passed to the ListHeaderComponent of the FlatList component, the refreshControl custom drop-down refresh callback is set on the FlatList component.