問題描述

遇到一個問題，就是RN中給一個View設定一個不透明度opacity，然後其包含的子View全部都有了這個opacity，那我們的需求肯定不是這樣，可能需要單獨設定各自的opacity或者說子View不需要，那麼該如何解決？

解決方案

就是使用#RRGGBBAA或者rgba(xx,xx,xx,xx)這種格式來設定，而不是使用opacity屬性。

比如：一個背景顏色為rgb(5,49,125)，opacity=0.6，我們就可以使用rgba(5,49,125,0.6)
或者#05317D99，其中99對應的是透明度0.6的十六進位制。

分析

那麼為什麼設定oapcity

我在查閱了一些資料之後發現：
在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']}
  ...