React Native中带图标View阴影弱于黑色View的原因咨询

问题描述 #

我用以下代码生成了对应的效果，想了解为何第一个包含图标的View的阴影比黑色View的阴影更淡。我添加了可见边框以便对比两者阴影差异，该现象在Android和iOS平台均存在。这真的是一个问题，还是正常的表现？

代码示例 #

<>
  <View
    style={{
      alignSelf: 'center',
      marginTop: 50,
      width: 50,
      height: 50,
      shadowColor: '#000',
      shadowOffset: {
        width: 0,
        height: 0,
      },
      shadowOpacity: 1,
      shadowRadius: 16.0,
      borderRadius: 1000,
      borderColor: 'red',
      borderWidth: 1,
    }}>
    <Icon name="cog" type="ionicons" color="black" size={50} />
  </View>
  <View
    style={{
      alignSelf: 'center',
      marginTop: 50,
      width: 50,
      height: 50,
      shadowColor: '#000',
      shadowOffset: {
        width: 0,
        height: 0,
      },
      shadowOpacity: 1,
      shadowRadius: 16.0,
      backgroundColor: '#000',
      borderRadius: 1000,
      borderColor: 'red',
      borderWidth: 1,
    }}
  />
</>

效果对比图 #

原因分析 #

这是正常表现，核心在于React Native（以及底层原生渲染引擎）的阴影计算逻辑：

• 黑色View是实心不透明容器，系统会直接基于整个View的圆角轮廓生成阴影，阴影的颜色、不透明度完全匹配设置参数，视觉上更浓郁。
• 带图标的View未设置backgroundColor，属于透明容器，此时系统会基于容器内可见内容的实际轮廓（也就是齿轮图标的形状）生成阴影。由于图标存在镂空、未完全填满View区域，阴影会分散在图标边缘，整体看起来比实心View的阴影淡很多。

解决办法 #

如果想让带图标的View和黑色View拥有一致的阴影效果，有两种方案：

• 给容器View添加背景色：哪怕设置为和图标同色的black，系统就会基于View的整体圆角轮廓生成阴影，和下方黑色View的阴影效果一致。
• 将阴影样式移到Icon组件上：让阴影基于图标本身的轮廓渲染，但这样阴影会和齿轮形状匹配，而非View的圆形轮廓。

内容的提问来源于stack exchange，提问作者Louis Loiseau-Billon