“不透明度”打破了 React Native 视图上的阴影

Question

说明：在下面的代码中，主视图的样式

opacity

设置为

1

并且阴影效果完美。当我将

opacity

设置为

0.6

时，阴影会扰乱视图。请检查图像以查看差异。我该如何解决这个问题？

注意：我没有在 IOS 上测试，但在 Android 上看起来像这样。

<View
  style={{
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    opacity: 1,
  }}>
  <View
    style={{
      padding: 20,
      borderRadius: 10,
      backgroundColor: Colors.white,
      shadowColor: '#000',
      elevation: 5,
    }}>
    <Text>Test 123</Text>
  </View>
  <View></View>
</View>

Answer 1

react-native 风格的父子不透明度

Answer 2

供将来参考，罪魁祸首是

elevation

属性，设置视图的

opacity

将在子视图具有

elevation

时渲染工件（请参阅 react-native issues #23090 中的详细信息）。您可以通过以下方式解决此问题：

• 像之前的答案一样在子视图上设置不透明度父级和子级的react-native风格不透明度。
• 按照上述问题中的建议使用

  needsOffscreenAlphaCompositing

  。请注意，使用此标志可能会很昂贵。