如何设置背景颜色的视图透明在React本地

这是我所使用的视图的样式

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,
}

但是它降低了视图内容的可见性。有答案吗?

当前回答

添加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)'            
    },

其他回答

这个可以帮到你，

添加一个View元素，并向该视图添加如下所示的样式

    .opaque{
       position:'absolute',
       backgroundColor: 'black',
       opacity: 0.7,
       zIndex:0
}

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

backgroundColor: 'transparent'

令人惊讶的是，没有人告诉我们这一点，这让我们更加清楚:

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

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

使用background的最好方法是十六进制代码#rrggbbaa，但它应该是十六进制。例如:50%的不透明度意味着256/2 =128，然后将该值(128)在HEX中转换为80，在这里使用#00000080 80表示50%透明。

推荐文章