Как загрузить загрузчик в пустые области Flatlist, когда рендеринг элемента занимает много времени и создает пустое пространство?

Question

Я хочу загрузить загрузчик на пустые места белого пространства. Потому что при быстрой прокрутке Flatlist оставляет пустые места, что кажется странным. И этим пустым пространствам нужно время, чтобы исчезнуть, чтобы отобразить исходный элемент.

Answer 1

Есть несколько способов предотвратить отображение пустого пространства. У самого FlatList есть некоторые реквизиты для этого, которые вы можете найти здесь: https://reactnative.dev/docs/flatlist

Например, ListEmptyComponent можно использовать так:

<FlatList
     ListEmptyComponent={() => <ActivityIndicator color={"blue"}/>}
/>

Вы также можете играть с initialNumToRender чтобы узнать, какое значение является оптимальным для вас. Его значение по умолчанию - 10. Дополнительные предложения см. В этой статье: https://medium.com/sanjagh/how-to-optimize-your-react-native-flatlist-946490c8c49b