React Native给View设置opacity属性会影响子View

问题描述

遇到一个问题，就是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']}
  ...

原文地址：https://www.jb51.cc/react/301519.html