绝对定位 FlatList 项目 react-native

Question

我正在尝试在本机的 FlatList 中制作动画。

平面列表

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

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

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

并且在 FlatList 的顶部（从空 space 开始）它将是 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 项目内，它就不能超出行的边界（据我所知）。您可能需要计算按下的项目的位置以开始额外组件的动画。

绝对定位 FlatList 项目 react-native

Absolute positioning a FlatList item react-native

animation

react-native

absolute

react-native-flatlist