本机反应-我无法使用两个平面列表向下滚动

Question

只有当我将 SafeAreaView 更改为 ScrollView 时我才能滚动，但出现此错误

VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.

{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>
      )}

Answer 1

虚拟化列表，例如 'SectionList' 和 'FlatList'，是 performance-optimized，这意味着它们在使用它们呈现大型内容列表时会减少内存消耗。此优化的工作方式是它仅呈现当前在 window 中可见的内容，通常意味着您设备的 container/screen。它还会替换所有其他相同大小的列表项空白 space 并根据您的滚动位置呈现它们。

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

检查这个post，它完美地解释了你的问题。

本机反应-我无法使用两个平面列表向下滚动

react native - I cannot scrolling down with two flatlist

react-native

react-native-flatlist

react-native-draggable-flatlist