如何设置背景颜色的视图透明在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,
}

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

当前回答

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

backgroundColor: 'transparent'

其他回答

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

为backgroundColor使用rgba值。

例如,

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

这将它设置为不透明度为80%的灰色，这是由不透明度小数0.8派生出来的。这个值可以是0.0到1.0之间的任何值。

以下工作很好:

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

你也可以试试:

backgroundColor: 'transparent'

这个可以帮到你，

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

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

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

推荐文章