Flex React Native FlatList 孩子长到全高？

Question

我正在使用React Native 的FlatList来渲染一堆堆叠在一起的项目。

这很好用，我设法使FlatList自身扩展其高度以填充可用空间，但我希望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 }} />}
/>

我创建了一个 Expo Snack，展示了ScrollView成功种植元素和FlatList失败的元素。

网上似乎有很多关于使父项FlatList全高的讨论，但我一直在努力寻找有关使FlatList 项目 增长以填充可用FlatList高度的任何内容。

我需要使用，FlatList因为我计划使用react-native-draggable-flatlist来实现拖放并且找不到不使用FlatList.

世博小吃的屏幕截图如下所示：

正如这里所看到的，似乎 DOM 中的问题是CallRenderer，这VirtualizedList是正确的高度和正确的 flex 样式，并且DayItem设置为增长（并与 一起工作ScrollView），但在两者之间CallRenderer似乎中断了 flex 关系两者之间：

任何帮助深表感谢。

Answer 1

作为解决方法，您可以监听onLayoutFlatlist 的，将计算出的高度保持在某个状态，然后将每个子项的高度设置为 flatlist height / data.length。