zIndex 在 IOS 的 react-native 中无法正常工作
Posted
技术标签:
【中文标题】zIndex 在 IOS 的 react-native 中无法正常工作【英文标题】:zIndex not working properly in react-native in IOS 【发布时间】: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 【参考方案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>
【讨论】:
以上是关于zIndex 在 IOS 的 react-native 中无法正常工作的主要内容,如果未能解决你的问题,请参考以下文章
React Native Android zIndex 提升而不重新排列
iOS Stackview Tap Buttons在彼此之上
如何停止 Blend 2.5 June Preview 在 SL1.0 XAML 上用 Panel.ZIndex 替换 Canvas.ZIndex?