react-native - zIndex不适用于React Native项目

我试图在React Native的卡顶部显示卡，然后将zIndex = 1设置为顶部卡，将zIndex = 0设置为底部卡，然后将它们放置在如下视图中：

<View style={{paddingVertical: MARGIN_1, justifyContent: 'center'}}>
  {this.props.subscribed ? (
    <CardSubscribe
      style={{zIndex: 2}}
    />
  ) : (null)}
  {this._renderTextItems()}
</View>

但是，两张卡之间没有重叠。底部卡从顶部卡开始：

react-native - zIndex不适用于React Native项目-LMLPHP

我还尝试了使用检查器进行调试，它显示了顶层卡具有zIndex = 1的属性：

并且底部卡具有zIndex = 0的属性：

我也尝试过将顶部卡放在底部卡之后，但它只显示在底部卡下面，就像zIndex没做任何事情一样。我该如何解决？

最佳答案

在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>

关于react-native - zIndex不适用于React Native项目，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49121981/

ZIndex

react-native - zIndex不适用于React Native项目