Animation 绝对定位平面列表项

我正在尝试在react native中的平面列表中制作动画

简单列表

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

一旦我按下item2，平面列表将如下所示：

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

在平面列表的顶部（从空白处开始），将是item2扩展到全屏高度，不允许item1和item3在列表中移动

有人知道这是否可以用react native实现吗

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

这是我的单件商品

<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高度扩展时从屏幕上消失

---

有什么想法吗？

实现这一点的一种方法是使用一个具有绝对定位和不透明度为0的额外组件。按下某个项目时，可以将按下的项目的不透明度设置为0，然后使用按下的项目的信息渲染额外的组件，然后可以提供所需的动画。这样，按下项的行仍将被填充，但被视为空。如果这个额外的组件在

平面列表

项中，它就不能超出行的边界（据我所知）。您可能需要计算被按下项目的位置，以从中开始额外组件的动画。

如果我这样做，动画将不会播放。我在更改状态时会闪烁，因为外部的“模态”组件将在每次点击项目时重新渲染。如果我在关闭它之前重置它，然后更改状态并重新渲染组件，则将显示旧元素或空元素的几分之一秒。我可以使用它来更改zIndex和/或不透明度，但只有在状态更改后才可以更改，但这不会是fuid。我将响应标记为正确的响应，因为您确实可以实现我的要求，但当状态更改触发两个项（平面列表项和在所有项之上使用的外部项）上的重新渲染时，会出现闪烁。我正在选择初始解决方案：FlatList.scrollToIndex+ItemList Animation+FlatList.scrollEnabled=false+ItemList.scrollEnabled=true。我知道这不适合您的用例，但我制作了这个点心，可能对某些人有用。