如何在 React Native 中设置视图的背景颜色透明 [英] How to set background color of view transparent in React Native

问题描述

这是我用过的视图样式

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

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

Currently it has a white background. I can change the backgroundColor as i want like '#343434' but it accepts only max 6 hexvalue for color so I cannot give opacity on that like '#00ffffff'. I tried using opacity like this

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

但它降低了视图内容的可见性.所以有答案吗?

but it reduces visibility of view's content. So any answers?

推荐答案

使用 rgba 值作为 backgroundColor.

例如

Use rgba value for the backgroundColor.

For example,

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

这会将其设置为具有 80% 不透明度的灰色，它源自不透明度小数 0.8.该值可以是从 0.0 到 1.0 的任何值.

This sets it to a grey color with 80% opacity, which is derived from the opacity decimal, 0.8. This value can be anything from 0.0 to 1.0.

这篇关于如何在 React Native 中设置视图的背景颜色透明的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！