FlatList 内的 FlatList 不滚动

Question

小吃：https://snack.expo.io/@mr3mo/snack-flatlist

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

我之前使用 ScrollView 作为父滚动，但这给了我一个警告，因为出于性能原因，在 ScrollView 中包含 FlatLists 不是一个好习惯。

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

不幸的是，这导致我的子 FlatList 无法滚动。

我尝试了很多方法，包括设置 maxHeight、flexGrow 等，但运气不佳。

如有任何帮助，我们将不胜感激。谢谢

Answer 1

我能够解决这个问题。

诀窍是将 List 包装在 ScrollView 组件中，并将整个屏幕组件包装在我在小吃中分享的 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}}/>}
    />
  );
}