FlatList中的FlatList不能滚动

Question

点心：https://snack.expo.io/@mr3mo/snack-flatlist

我正在尝试渲染一个屏幕，它将显示各种图形和一个或多个表。屏幕需要是可滚动的。

我以前在父滚动中使用了ScrollView，但这给了我一个警告，因为出于性能原因，在ScrollView中包含FlatLists并不是一个好的做法。

所以我创建了这个VirtualizedView，它是一个FlatList，我屏幕上的所有组件都在ListHeaderComponent中呈现。

不幸的是，这导致我的孩子FlatList不能滚动。

我尝试了很多东西，包括设置一个maxHeight，flexGrow等等，但没有太多的运气。

任何帮助都将不胜感激。谢谢

Answer 1

我能够解决这个问题。

诀窍是将列表包装在ScrollView组件中，并将整个屏幕组件包装在我在snack中共享的VirtualizedVIew组件中。

这是我的LogsScreen.jsx文件的样子：

import { VirtualizedView } from "../components";
...
return (
  <View>
    <VirtualizedView>
      ...
    <ScrollView>
      <FlatList>
      ...
      </FlatList>
    </ScrollView>
    </VirtualizedView>
   </View>
)

Inside VirtualizedView.jsx:

import React from 'react';
import { FlatList, View } from 'react-native';

export default function VirtualizedView(props) {
  return (
    <FlatList
      data={[]}
      ListEmptyComponent={null}
      keyExtractor={() => "dummy"}
      renderItem={null}
      ListHeaderComponent={() => (
        <>{props.children}</>
      )}
      ListFooterComponent={<View style={{height: 20}}/>}
    />
  );
}