zIndex 不适用于 React Native 项目

Question

我试图在 React Native 中的卡片顶部显示一张卡片，并为顶部卡片设置

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

的属性：

我也尝试将顶部卡片放置在底部卡片之后，但它仅显示在底部卡片下方，就像

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>

Answer 2

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

Answer 3

将文档树中堆栈级别较高的元素放在堆栈级别较低的元素之后。

const App = () => (
  <View style={{ flex: 1 }}>
    // View 1 (Higher View)
    <View style={{ backgroundColor: 'yellow',  flex: 1 }} />

    // View 2 (Lower View)
    // View 2 is placed after View 1
    <View style={{ position: 'absolute',  zIndex: 1 }} />
  </View>
);