绝对定位FlatList项反应原生

Question

我试图在反应原生的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项具有样式绝对值，因为在默认情况下，每个元素都具有相对定位。

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

有什么想法吗？

Answer 1

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