zIndex 在 IOS 的 react-native 中无法正常工作答案

【问题标题】：zIndex not working properly in react-native in IOSzIndex 在 IOS 的 react-native 中无法正常工作
【发布时间】：2018-08-02 07:17:09
【问题描述】：

我只有 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>

有人知道原因吗？

【问题讨论】：

尝试 zindex 与海拔 {elevation: 1000,zIndex:1000}

标签： javascript ios react-native z-index

【解决方案1】：

请将 zindex 添加到父视图。在 iOS 中，zIndex 不适用于嵌套的 parentView。你需要让parentView的zIndex高，然后再target 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>

【讨论】：

哦，哇，这根本没有意义，但解决了我的问题。 React Native 太奇怪了！谢谢！
谢谢 :) 我花了一整天的时间试图找出问题所在。

【解决方案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>

【讨论】：