zIndex不适用于本机项目

Question

我正在尝试在React Native中的卡片顶部显示一张卡片，并为顶部卡片设置?- build(6, [[5, 1], [4, 2], [3, 3], [2, 4], [1, 5]]).，为底部卡片设置zIndex = 1，并将它们放置在如下视图中：

zIndex = 0

然而，两张牌之间没有重叠。底牌在顶牌后开始：

我还尝试使用检查器进行调试，它显示顶部卡具有<View style={{paddingVertical: MARGIN_1, justifyContent: 'center'}}> {this.props.subscribed ? ( <CardSubscribe style={{zIndex: 2}} /> ) : (null)} {this._renderTextItems()} </View> 的属性：

底部卡片具有zIndex = 1：

的属性

我还尝试将顶部卡放在底部卡之后，但它只是显示在底部卡的下方，就像zIndex = 0没有做任何事情一样。我该如何解决这个问题？

Answer 1

在 React Native 中，我们默认为position: relative。如果您想正确使用zIndex，可能需要添加position: 'absolute'，以便它们重叠，如您的用例所述。

例如：

<View style={{flex: 1}}>
               <View style={{width: 200, height: 200, zIndex: 1, position: 'absolute', backgroundColor: 'red'}} />
               <View style={{width: 200, height: 200, zIndex: 2, position: 'absolute', backgroundColor: 'blue'}} />
 </View>