如何在React Native中设置透明视图的背景颜色

Question

这是我使用过的视图样式

backCover: {
  position: 'absolute',
  marginTop: 20,
  top: 0,
  bottom: 0,
  left: 0,
  right: 0,
}

目前它有白色背景.我可以像我想要的那样更改backgroundColor,'#343434'但它只接受最大6个十六进制颜色,所以我不能给它提供不透明度'#00ffffff'.我试过像这样使用不透明度

backCover: {
  position: 'absolute',
  marginTop: 20,
  top: 0,
  bottom: 0,
  left: 0,
  right: 0,
  opacity: 0.5,
}

但它降低了视图内容的可见性.那么答案呢？

Answer 1

使用rgba值backgroundColor.

例如,

backgroundColor: 'rgba(52, 52, 52, 0.8)'

这将其设置为灰色,具有80%的不透明度,该颜色来自不透明度十进制0.8.该值可以是任何东西0.0来1.0.

Answer 2

以下工作正常:

backgroundColor: 'rgba(52, 52, 52, alpha)'

你也可以尝试:

backgroundColor: 'transparent'

Answer 3

试试这个backgroundColor: '#00000000' 它会将背景颜色设置为透明,它遵循#rrggbbaa十六进制代码

Answer 4

令人惊讶的是没有人告诉过这一点，这提供了一些 !clarity：

style={{
backgroundColor: 'white',
opacity: 0.7
}}

Answer 5

您应该了解当前 iOS 和 RGBA 背景之间存在的冲突。

摘要： public React Native 目前或多或少直接公开了 iOS 层阴影属性，但是这存在许多问题：

1) 默认情况下使用这些属性时的性能很差。这是因为 iOS 通过获取视图的精确像素掩码（包括任何半透明内容及其所有子视图）来计算阴影，这非常消耗 CPU 和 GPU。2) iOS 阴影属性与 CSS box-shadow 标准的语法或语义不匹配，不太可能在 Android 上实现。3) 我们不暴露该layer.shadowPath属性，这对于从图层阴影中获得良好的性能至关重要。

shadowPath此 diff 通过实现与具有不透明背景的视图的视图边框相匹配的默认值来解决问题 1) 。这通过针对常见使用案例进行优化来提高阴影的性能。我还恢复了具有阴影道具的视图的背景颜色传播 - 这应该有助于确保这种最佳情况更频繁地发生。

对于具有显式透明背景的视图，阴影将继续像以前一样工作（shadowPath将保持未设置，并且阴影将完全从视图及其子视图的像素导出）。然而，这是性能最差的路径，因此除非绝对必要，否则应该避免它。将来可能会默认禁用或完全删除对此的支持。

对于半透明图像，建议您将阴影烘焙到图像本身中，或者使用其他机制来预先生成阴影。对于文本阴影，您应该使用 textShadow 属性，它可以跨平台工作并且具有更好的性能。

问题 2) 将在未来的 diff 中解决，可能通过将 iOS ShadowXXX 属性重命名为 boxShadowXXX，并更改语法和语义以匹配 CSS 标准来解决。

问题 3) 现在基本上没有意义，因为我们自动生成shadowPath。将来，如果需要更精确地控制阴影，我们可能会提供 iOS 特定的 prop 来显式设置路径。

审稿人：维酷

提交：https://github.com/facebook/react-native/commit/e4c53c28aea7e067e48f5c8c0100c7cafc031b06

Answer 6

尝试使用透明属性值来制作透明背景色。

backgroundColor: 'transparent'

Answer 7

添加 React-Native 版本 0.64 的引用

命名颜色

• 命名颜色：DOCS

在 React Native 中，您还可以使用颜色名称字符串作为值。注意：React Native 仅支持小写颜色名称。不支持大写颜色名称。透明# 这是 rgba(0,0,0,0) 的快捷方式，与 CSS3 中的相同。

因此你可以这样做：

background: {
    backgroundColor: 'transparent'        
},

这是以下的快捷方式：

background: {
        backgroundColor: 'rgba(0,0,0,0)'            
    },