父级<View>设置的opacity在Android端无法正确作用于子<Image>组件

问题原因 #

这是React Native跨平台渲染的固有差异，两个系统的图层合成逻辑不同：

• iOS端会先将父容器及其所有子元素合并为单个图层后，再统一应用opacity属性，因此所有元素透明度表现一致
• Android端默认会对父容器、子元素分别应用透明度后再叠加图层，半透明的父容器白色背景和半透明图片叠加后就会出现你遇到的视觉差异，看起来图片区域透明度明显低于父容器其他区域

异常效果（Android端）：

正常效果（iOS端）：

可落地的修复方案 #

方案1：添加overflow属性强制图层合成 #

给父View加overflow: 'hidden'，强制Android将父容器和子元素合并为单个图层统一应用透明度，改后代码如下：

<View style={{ opacity: 0.4, backgroundColor: 'white', borderRadius: 24, overflow: 'hidden' }}>
  <Image
    source={{ uri }}
    style={{ height: 56, width: 56, resizeMode: 'contain' }}
  />
</View>

这个方案改动最小，90%以上的同类场景都可以解决。

方案2：拆分透明度设置，不用父容器统一opacity #

放弃给父容器加opacity，分别给父容器背景色加透明度通道、给图片单独设置透明度：

<View style={{ backgroundColor: 'rgba(255,255,255,0.4)', borderRadius: 24 }}>
  <Image
    source={{ uri }}
    style={{ height: 56, width: 56, resizeMode: 'contain', opacity: 0.4 }}
  />
</View>

这个方案不存在图层合成的兼容性问题，双端表现完全一致。

方案3：外层单独套透明度容器 #

如果前两个方案都不满足你的场景（比如父容器还有其他复杂子元素），可以把透明度属性提到最外层容器，内层容器只负责背景、圆角样式：

<View style={{ opacity: 0.4 }}>
  <View style={{ backgroundColor: 'white', borderRadius: 24 }}>
    <Image
      source={{ uri }}
      style={{ height: 56, width: 56, resizeMode: 'contain' }}
    />
  </View>
</View>

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