绝对定位一个FlatList项目react-native

问题描述：

我想在一个FlatList中的反应本机制作一个动画。绝对定位一个FlatList项目react-native

平直列表

-------- 
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移动列表顶部的元素，然后将其定位为绝对位置。但是这会使item3在屏幕上消失，同时item2的高度也在扩大。

有什么想法？

答

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

如果我会这样做，那么动画不会流动。由于外部的“模态”组件在改变状态时会出现闪烁，会在每个项目的水龙头上重新渲染。如果在关闭它之前重置它，然后改变状态并重新渲染组件，它将显示一小部分时间旧元素或空元素。只有在状态改变之后，我才能使用它来改变zIndex和/或不透明度，但这不会很费劲。 –

我将响应标记为正确的，因为确实可以实现我所问的内容，但是在两个项目（FlatList项目和所有外部项目上使用的外部项目）的状态更改触发重新呈现时，闪烁就在那里。我选择了初始解决方案：FlatList.scrollToIndex + ItemList Animation + FlatList.scrollEnabled = false + itemList.scrollEnabled = true。 –

我知道这不适合你的用例，但我做了这个零食，可能对某些人有用。 https://snack.expo.io/@n1ru4l/listview-2-fullscreen – l0rin

绝对定位一个FlatList项目react-native

相关推荐