这是我所使用的视图的样式
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,
}
但是它降低了视图内容的可见性。 有答案吗?
当前回答
这个可以帮到你，
添加一个View元素，并向该视图添加如下所示的样式
.opaque{
position:'absolute',
backgroundColor: 'black',
opacity: 0.7,
zIndex:0
}
其他回答
令人惊讶的是，没有人告诉我们这一点，这让我们更加清楚:
style={{
backgroundColor: 'white',
opacity: 0.7
}}
尝试使用透明属性值来制作透明的背景色。
backgroundColor: 'transparent'
以下工作很好:
backgroundColor: 'rgba(52, 52, 52, alpha)'
你也可以试试:
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)'
},
如果你有十六进制颜色，你可以将它转换为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) }} />
)
帮助我的来源
