问题描述
遇到一个问题,就是RN中给一个View设置一个不透明度opacity,然后其包含的子View全部都有了这个opacity,那我们的需求肯定不是这样,可能需要单独设置各自的opacity或者说子View不需要,那么该如何解决?
解决方案
我在Stack Overflow上找到一个答案,应该说大部分网上的解决方案都是这样的! react-native style opacity for parent and child
就是使用#RRGGBBAA 或者rgba(xx,xx,xx) 这种格式来设置,而不是使用opacity 属性。
比如:一个背景颜色为rgb(5,49,125) ,opacity=0.6 ,我们就可以使用rgba(5,125,0.6) 或者#05317D99 ,其中99对应的是透明度0.6的十六进制。
关于透明度转换为对应的十六进制,可以参考下边这篇文章: 透明度百分比和十六进制对应关系以及计算方法
分析
那么为什么设置oapcity ,子View会继承,而设置rgba 就避免了这个问题?说到底还是对opacity 属性和alpha 通道不太了解。
我在查阅了一些资料之后发现: 在CSS3.0之前,在样式中指定的颜色值只能为RGB颜色值,并且只能通过opacity 属性来设置元素的透明度。CSS3.0开始增加了3种颜色值:RGBA ,HSL 和HSLA ,并且允许通过对RGBA颜色值和HSLA颜色值设定alpha 通道的方法来更加容易地实现透明度的变化。
opacity 属性 规定不透明度的级别。从 0.0 (完全透明)到 1.0(完全不透明)。 会从父元素继承 opacity 属性的值。
alpha 通道 设置元素的透明度。从 0.0 (完全透明)到 1.0(完全不透明)。
拓展
我们可能会使用到react-native-linear-gradient 这个库来实现渐变色背景,那么如果这里也需要设置一个透明度,那么同样的方法,要在colors 属性中使用rgba 来实现,而不是在style 中设置opacity ,否则会影响子View:
<LinearGradient
colors={['#4DD3D2E8','#39AFB2E8']}
... (编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|