android卡片层叠效果_ReactNative之Android绝对布局position:'absolute'问题

工作中会遇到各种各样的问题,ReactNative开发也是填坑不止。

比如最近在开发需求中,就遇到一个问题。在一个卡片类型的右上角添加一个删除按钮。使用了绝对布局position:'absolute'属性,在Android上却无法正常显示,很是烦恼。

有一个相关的issue:Abslute position between two views, not working properly on Android · Issue #27255 · facebook/react-native

正常希望的展示效果:

v2-69e37d4de05933b96b2726f6e35cde32_b.jpg

但是实际效果是:

v2-a1a9ba3894fc1619576d5dcbc53cd090_b.jpg

可以看到,绿色的view被遮挡了。

查阅相关资料和尝试之后,可以使用position:'absolute' 和zIndex结合使用解决这个问题。

最后贴一下,相关代码。

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

个人网站: Code change the World,

微信公众号:君伟说。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值