Question

我试图进行转换，其中给定一个预览缩略图列表，当我点击一个缩略图时，它会根据需要将其缩放到整个屏幕并显示所有其他详细信息。我遇到的问题是，当我尝试使用属性position: 'absolute', top: 0, right: 0, left: 0, zIndex: 2时，为了将组件的完整视图置于所有其他同级组件之上，例如模态，由于某种原因，子组件只能覆盖其子组件覆盖的区域作为缩略图。

结构：

-- Parent Component containing FlatList of Child Components
-- -- Child Component 0
-- -- Child Component 1
-- -- Child Component 2
-- -- Child Component 3
-- -- Child Component 4

我们的想法是制作类似于iOS App Store中的工作方式：https://vimeo.com/272028619

这是另一个例子，我需要它如何工作：https://vimeo.com/272027050

这就是它现在的样子：https://vimeo.com/272027061

我怎样才能将父组件的整个区域覆盖为子组件？

Answer 1

尝试将您的父组件设置为absolute样式，并在子组件的每个onclick事件上设置样式，切换z-index。

希望这有效：）

Answer 2

绝对位置在FlatList内无效。您可以将FlatList替换为View，并将position: absolute设置为View组件，如下所示：

data.map((item) => 
  <View style={{position: absolute}}>
    <ChildComponent item={item}>
  </View>
);

现在，在您的子组件中，您必须设置每张卡的top属性，该属性将是所有以前卡的高度的总和。您应用的动画将在此之后工作。

反应原生 - onclick组件不会超过兄弟组件

2 个答案: