绝对定位 FlatList 项目 react-native

Question

我正在尝试在 react-native 中的 FlatList 中制作动画。

平面列表

--------
 item1
--------
 item2
--------
 item3
--------

当我按下 item2 时，FlatList 将如下所示：

--------
 item1
--------
 empty
--------
 item3

在 FlatList 之上（从空白区域开始），item2 将扩展到全屏高度，不允许 item1 和 item3 在列表中移动。

有没有人知道这是否可以使用 react-native 来完成？

我已经尝试过使用 zIndex 的绝对定位，但似乎没有任何效果。

这是我的 FlatList 项目

<Animated.View style={[ { height: this.state.height }, this.state.pressed ? { position: 'absolute', top:0, bottom:0, left:0, right:0, zIndex: 1000 } : 
{} ]}>
  <Text>Absolute expandable FlatList item</Text>
</Animated.View>

FlatList 项目具有绝对样式，因为在 react 中每个元素默认都有相对定位。

我做了一个没有绝对定位的技巧，使用 scrollToIndex 将元素移动到列表顶部，然后将其定位为绝对。但这会使 item3 在 item2 高度扩展时从屏幕上消失。

有什么想法吗？

Answer 1

实现这一点的一种方法是拥有一个具有绝对定位和不透明度 0 的额外组件。当您按下某个项目时，您可以将按下项目的不透明度设置为 0，然后使用来自按下项目的信息渲染额外组件然后你可以给出想要的动画。这种方式按下项目的行仍将被填充但被视为空。如果这个额外的组件在FlatList 项目内，它就不能超出行的边界（据我所知）。您可能需要计算按下项目的位置以启动额外组件的动画。