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

【问题标题】："opacity" breaks the shadow on React Native view“不透明度”打破了 React Native 视图的阴影
【发布时间】：2022-01-11 23:46:06
【问题描述】：

说明：在下面的代码中，主视图的样式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>

【问题讨论】：

标签： android react-native shadow

【解决方案1】：

react-native style opacity for parent and child

【讨论】：

不，我希望不透明度影响整个视图
然后尝试将不透明度也放在子视图上（查看上面的更新代码）
它看起来仍然很糟糕，因为它向内部视图添加了两次不透明度，它仍然看起来很糟糕。
请检查这是否有帮助react-native style opacity for parent and child