反应原生 - 我不能用两个平面列表向下滚动答案

【问题标题】：react native - I cannot scrolling down with two flatlist反应原生 - 我不能用两个平面列表向下滚动
【发布时间】：2020-09-11 14:29:37
【问题描述】：

只有在我将 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>
      )}

【问题讨论】：

标签： react-native react-native-flatlist react-native-draggable-flatlist

【解决方案1】：

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

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

查看post，它完美地解释了您的问题。

【讨论】：