Блог

Главная - Вопросы по программированию - VirtualizedList: У вас большой список, который медленно обновляется — Реагирует на собственный плоский список

VirtualizedList: У вас большой список, который медленно обновляется — Реагирует на собственный плоский список

#react-native #react-native-flatlist #react-virtualized

Вопрос:

У меня проблема с плоским списком, в который входит не более 10 элементов.

Это код для плоского списка:

 <FlatList
    style={styles.flatList}
    onScroll={(event) => toggleHeader(event.nativeEvent.contentOffset.y > headerHeight)}
    contentContainerStyle={{ paddingBottom: getContentContainerStyle() }}
    showsVerticalScrollIndicator={false}
    onRefresh={makeRequest}
    refreshing={isRefreshing}
    data={data}
    renderItem={renderItem}
    keyExtractor={item => item?.id?.toString()}
/>

Поток в приложении выглядит следующим образом:

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

Мой метод renderItem представляет собой длинную стопку, если нужно проверить тип элемента, чтобы узнать, что нужно визуализировать, потому что может быть несколько типов элементов, но их количество действительно мало (максимум 10-15). Некоторые элементы представляют собой горизонтальные плоские списки, но также количество элементов в них составляет 2-4.

После смены вкладок пару раз появляется это предупреждение VirtualizedList, но мои элементы отображаются правильно в правильном количестве и порядке.

Я использую функциональные компоненты и крючки.

Попробовал добавить maxToRenderPerBatch и initialNumToRender , но это не работает.

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

Редактировать

Эта проблема возникает только в iOS.

Ответ №1:

Добавьте представление прокрутки «Все дети» в свой плоский список обращений:

<FlatList nestedScrollEnabled={true}/>

Комментарии:

1. Я попытался добавить это свойство во все мои плоские списки, которые каким-то образом вложены как элемент в мой большой плоский список, а также в большой плоский список, но все еще загружается на iOS спасибо за ваше время

Метки: ,