zIndex不适用于本机项目

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

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

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>