工作中会遇到各种各样的问题，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，

微信公众号：君伟说。

Logo
开源鸿蒙跨平台开发者社区

开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。

更多推荐

React Native鸿蒙版：自定义useCurrency货币格式化

在金融、电商等跨平台应用开发中，货币格式化是基础且关键的功能需求。中国：¥1,000.00美国：$1,000.00德国：1.000,00 €日本：¥1,000这些差异不仅体现在货币符号上，还涉及千位分隔符、小数点位置、货币符号位置等细节。在React Native应用中，特别是在OpenHarmony平台上，实现一致且符合当地习惯的货币显示至关重要。本文深入探讨了React Native在Open

avatar 开源鸿蒙跨平台开发者社区
cover

Flutter for OpenHarmony 实战：侧滑抽屉（Drawer）菜单的实现与定制

avatar 开源鸿蒙跨平台开发者社区

用React Native开发OpenHarmony应用：自定义useNumberFormat数字格式化

本地化需求：不同地区对数字的表示方式差异巨大业务特定需求：金融应用需要精确到小数点后两位，而科学计算可能需要更多位数性能考量：在长列表中频繁格式化可能影响渲染性能动态变化：用户可能在运行时切换语言或区域设置使用JavaScript内置的API采用第三方库如或numeral自定义格式化函数然而，在OpenHarmony平台上，这些方案都存在不同程度的局限性。在OpenHarmony的JavaScri

avatar 开源鸿蒙跨平台开发者社区