react-native - zIndex 不适用于 react 原生项目

Question

我试图在 React Native 中的卡片上显示一张卡片并设置 zIndex = 1顶牌和zIndex = 0对于底部卡片并将它们放置在如下 View 中:

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

但是，两张卡之间没有重叠。底牌在顶牌之后开始:

我也试过用inspector进行调试，它显示顶卡具有 zIndex = 1的属性:

底部卡片的属性为 zIndex = 0 :

我也尝试将顶部卡片放在底部卡片之后，但它只显示在底部卡片下方，例如 zIndex没有做任何事情。我应该如何解决这个问题？

Answer 1

z-index 在 IOS 中运行良好。但同样你会在android中遇到问题。在 android z-index 不工作你需要使用海拔。但请不要忘记添加 z-index。

<TouchableOpacity
              style={{
                alignSelf: 'center',
                position: 'absolute',
                right: 10,
                top: 10,
                zIndex: 15,
                elevation: (Platform.OS === 'android') ? 50 : 0
              }}
              onPress={() => {}}
            >
              <Image
                source={require('dummy.png')}
              />
            </TouchableOpacity>