zIndex在IOS中的本机中无法正常工作

Question

我只有1张需要zIndex才能显示在前面的图像。它可以在Android上运行，但不能在IOS设备上显示。不知道为什么。

这是Android的图片：

这是IOS的图片：

如您所见，用户图像未出现在IOS中。

代码如下：

 <View>
      <Image
        source={require("./images/user-img.png")}
        style={{width:95,height:95,marginTop:10,marginLeft:135,position:'absolute',zIndex:1}}
      />
      <ImageBackground
        source={require("./images/bg-img.png")}
        style={{ width: "100%", height: "100%"}}>
        <View>
         //extra code here
        </View>
      </ImageBackground>
 </View>

有人知道原因吗？

Answer 1

尝试先渲染背景图片，然后渲染个人资料图片

<View>
  <ImageBackground
    source={require("./images/bg-img.png")}
    style={{ width: "100%", height: "100%"}}>
    <View>
     //extra code here
    </View>
  </ImageBackground>
  <Image
    source={require("./images/user-img.png")}
    style={{width:95,height:95,marginTop:10,marginLeft:135,position:'absolute',zIndex:1}}
  />
</View>

Answer 2

请在父视图中添加zindex。 在iOS中，zIndex不适用于嵌套的parentView。 您需要使parentView具有较高的zIndex，然后再次定位View。

<View style={{zIndex: 10}}>
  <Image
    source={require("./images/user-img.png")}
    style={{width:95,height:95,marginTop:10,marginLeft:135,position:'absolute',zIndex:20}}
  />
  <ImageBackground
    source={require("./images/bg-img.png")}
    style={{ width: "100%", height: "100%"}}>
    <View>
     //extra code here
    </View>
  </ImageBackground>