реагировать на родной - я не могу прокрутить вниз с двумя плоскими списками

Я могу прокручивать только в том случае, если я меняю SafeAreaView на ScrollView, но получаю эту ошибку

VirtualizedLists никогда не должны быть вложены в простые ScrollView с той же ориентацией - вместо этого используйте другой контейнер с поддержкой VirtualizedList.

{subCategoryIsLoading ? (
        <ActivityIndicator
          size='large'
          color={primColor}
          style={{marginTop: 150}}
        />
      ) : (
        <SafeAreaView>
          <View style={styles.containerSubCategory}>
            <FlatList
              showsVerticalScrollIndicator={false}
              data={filterCatTrue()}
              keyExtractor={item => item._id}
              renderItem={({item}) => {
                return (
                  <View style={styles.containerImages}>
                    <TouchableHighlight onPress={() => console.log(item._id)}>
                      <Image
                        source={{
                          uri: `${urlImages}subCategories/${item.image}`,
                        }}
                        style={styles.imageSubCategory}
                      />
                    </TouchableHighlight>
                  </View>
                )
              }}
            />
            <FlatList
              horizontal={false}
              numColumns={2}
              showsVerticalScrollIndicator={false}
              columnWrapperStyle={{
                justifyContent: 'space-between',
              }}
              data={filterCatFalse()}
              keyExtractor={item => item._id}
              contentInset={{bottom: 60}}
              renderItem={({item}) => {
                return (
                  <View style={styles.containerImagesWide}>
                    <TouchableHighlight>
                      <Image
                        source={{
                          uri: `${urlImages}subCategories/${item.image}`,
                        }}
                        style={styles.imageSubCategoryWide}
                      />
                    </TouchableHighlight>
                  </View>
                )
              }}
            />
          </View>
        </SafeAreaView>
      )}

1 ответ

Решение

Виртуализированные списки, то есть, например, "SectionList" и "FlatList", оптимизированы по производительности, что означает, что они улучшают потребление памяти при их использовании для отображения больших списков содержимого. Принцип работы этой оптимизации заключается в том, что она отображает только тот контент, который в данный момент отображается в окне, обычно это означает контейнер / экран вашего устройства. Он также заменяет все остальные элементы списка пустым пространством того же размера и отображает их в зависимости от положения прокрутки.

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

Проверьте этот пост, он прекрасно объясняет вашу проблему:

https://nyxo.app/fixing-virtualizedlists-should-never-be-nested-inside-plain-scrollviews#:%7E:text=When%20developing%20with%20React%20Native,another%20VirtualizedList%2Dbacked%20container%20instead.

Другие вопросы по тегам