reactjs - FlatList 内的 FlatList 不滚动

Question

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

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

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

所以我创建了这个 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}}/>}
    />
  );
}