-1

我只能在将SafeAreaView更改为ScrollView但出现此错误的情况下滚动

VirtualizedLists 永远不应该嵌套在具有相同方向的普通 ScrollViews 中 - 改用另一个 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>
      )}
4

1 回答 1

0

虚拟化列表，例如“SectionList”和“FlatList”，是性能优化的，这意味着它们在使用它们来呈现大量内容列表时会改善内存消耗。这种优化的工作方式是它只呈现当前在窗口中可见的内容，通常是指设备的容器/屏幕。它还替换所有其他列表项相同大小的空白空间，并根据您的滚动位置呈现它们。

现在，如果您将这两个列表中的任何一个放在 ScrollView 中，它们将无法计算当前窗口的大小，而是会尝试渲染所有内容，这可能会导致性能问题，当然它也会给您前面提到的警告。

检查这篇文章，它完美地解释了你的问题。

于 2020-09-11T14:42:04.987 回答