Android端React Native elevation阴影失效问题排查及解决方案

问题表现 #

• 应用迭代更新后，Android端所有此前正常生效的elevation阴影全部失效
• iOS端基于shadow属性实现的阴影不受影响，可正常展示
• 所有配置elevation属性的组件均已同步设置backgroundColor，样式此前可正常运行，可排除样式实现问题

相关样式示例 #

{
  display: 'flex',
  justifyContent: 'center',
  backgroundColor: 'white',
  borderRadius: borderRadius,
  elevation: 2,
}

根因说明与修复方案 #

elevation属性的渲染依赖Android系统硬件加速能力，经过排查定位，本次问题是由于应用配置中手动设置了hardwareAccelerated="false"，关闭了硬件加速功能，导致elevation属性无法正常生效。

修复操作：将Android配置中hardwareAccelerated参数值改为true，开启硬件加速后即可恢复elevation阴影效果。

内容的提问来源于stack exchange，提问作者Tara