这是我所使用的视图的样式
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,
}
但是它降低了视图内容的可见性。 有答案吗?
当前回答
令人惊讶的是，没有人告诉我们这一点，这让我们更加清楚:
style={{
backgroundColor: 'white',
opacity: 0.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)'
},
为backgroundColor使用rgba值。
例如,
backgroundColor: 'rgba(52, 52, 52, 0.8)'
这将它设置为不透明度为80%的灰色，这是由不透明度小数0.8派生出来的。这个值可以是0.0到1.0之间的任何值。
以下工作很好:
backgroundColor: 'rgba(52, 52, 52, alpha)'
你也可以试试:
backgroundColor: 'transparent'
如果你有十六进制颜色，你可以将它转换为rgba并设置不透明度:
const hexToRgbA = (hex, opacity) => {
let c;
if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
c = hex.substring(1).split('');
if (c.length === 3) {
c = [c[0], c[0], c[1], c[1], c[2], c[2]];
}
c = `0x${c.join('')}`;
return `rgba(${[(c >> 16) & 255, (c >> 8) & 255, c & 255].join(',')},${opacity})`;
}
throw new Error('Bad Hex');
};
const color = '#1f8b7f'; // could be a variable
return (
<View style={{ backgroundColor: hexToRgbA(color, 0.1) }} />
)
帮助我的来源
使用background的最好方法是十六进制代码#rrggbbaa，但它应该是十六进制。 例如:50%的不透明度意味着256/2 =128，然后将该值(128)在HEX中转换为80，在这里使用#00000080 80表示50%透明。
