React-Native中zIndex在IOS上无法正常工作

Question

我只有一张图片需要使用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>

有人知道原因吗？

- Joshua Rajandiran

---

尝试使用zIndex和elevation {elevation: 1000, zIndex: 1000}。 - anil sidhu

Answer 1

请在父视图中添加zIndex。

在iOS中，对于嵌套的父视图，zIndex不起作用。您需要使父视图具有较高的zIndex值，然后再次定位视图。

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

- Ken W.

---

哇，这一点都不通顺，但是解决了我的问题。React Native真的很奇怪！谢谢！ - Yulian

谢谢 :) 我花了整整一天的时间来找出问题所在。 - Thomaz Capra

如果您的元素需要可点击，则需要进行一些调整，因为将zIndex添加到父级可以修复iOS，但会破坏Android。 <View style={Platform.OS ==='ios'? {zIndex: 10}: {}}> <Button style={{zIndex: 99, elevation: 99}}> 可点击 </Button> </View> - John C.

Answer 2

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

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

- Gokul