reactjs - Flex React Native FlatList child 长到全高？

Question

我正在使用 FlatList从 React Native 渲染一堆堆叠在一起的项目。
这工作正常，I've managed to make the FlatList itself expand it's height to fill the available space但我想要 FlatList当有更多可用空间时，项目会增长。
使用 ScrollView 很容易做到这一点(简化的伪代码):

<ScrollView
  contentContainerStyle={{
    display: "flex",
    flexGrow: 1,
  }}
>
  <Item key={1} style={{ flexGrow: 1 }} />
  <Item key={2} style={{ flexGrow: 1 }} />
</ScrollView>

但是它不适用于 FlatList (简化的伪代码):

<FlatList
  contentContainerStyle={{
    display: "flex",
    flexGrow: 1,
  }}
  renderItem={({ index }) => <Item key={index} style={{ flexGrow: 1 }} />}
/>

I've created an Expo Snack showing both the ScrollView successfully growing the elements and the FlatList failing to do so.
网上好像有很多关于制作父级的讨论FlatList全高，但我一直在努力寻找有关制作 FlatList 的任何信息项目 增长以填补可用 FlatList高度。
我需要使用 FlatList因为我打算使用 react-native-draggable-flatlist实现拖放并且找不到不使用的等效库FlatList .
Expo Snack的截图显示在这里:

如此处所见，DOM 中的问题似乎是 CallRenderer , VirtualizedList是具有正确 flex 样式的正确高度，以及 DayItem设置为增长(并与 ScrollView 一起工作)，但在两者之间有 CallRenderer这似乎打断了两者之间的弹性关系:



任何帮助深表感谢。

Answer 1

作为解决方法，您可以收听 onLayout Flatlist的，将计算出的高度保持在一个状态，然后将每个 child 的高度设置为flatlist的高度/data.length。