Fork me on GitHub

ReactNative之Android绝对布局position:'absolute'问题

工作中会遇到各种各样的问题,ReactNative开发也是填坑不止。
比如最近在开发需求中,就遇到一个问题。在一个卡片类型的右上角添加一个删除按钮。使用了绝对布局position:’absolute’属性,在Android上却无法正常显示,很是烦恼。
有一个相关的issue:https://github.com/facebook/react-native/issues/27255
正常希望的展示效果:
在这里插入图片描述

但是实际效果是:
在这里插入图片描述

可以看到,绿色的view被遮挡了。
查阅相关资料和尝试之后,可以使用position:’absolute’ 和zIndex结合使用解决这个问题。
最后贴一下,相关代码。

1
2
3
4
5
6
7
8
9
10
11
12
<View style={{
position: 'absolute',
zIndex: 99999,
justifyContent: 'center',
alignItems: 'center',
top: 10,
width: 30,
height: 30,
elevation: 99999
}}>
<Image source={require('images/compared/delete_gray.png')} />
</View>

微信公众号:君伟说。

-------------本文结束感谢您的阅读-------------
坚持原创技术分享,您的支持将鼓励我继续创作!