React Native中如何为带opacity的父组件内子元素设置独立透明度

问题本质 #

React Native 中的opacity属性是针对整个组件的合成渲染效果，设置后会将组件本身 + 所有后代组件视为一个整体计算透明度，子组件设置的opacity只会和父级的透明度值相乘，不会独立生效。
比如父级设置opacity: 0.5，子级设置opacity: 0.9，最终子级实际渲染的透明度为 0.5 * 0.9 = 0.45，因此看起来子级的透明度设置没有生效。 #

解决方案 #

方案1：使用rgba替换父级opacity（最优解，适合大多数场景） #

不要给父组件设置整体opacity，而是将父组件需要半透明的样式（比如背景色、边框色等）通过带alpha通道的rgba值设置，这样不会影响子组件的透明度渲染：

// 错误写法
<View style={{backgroundColor: '#000', opacity: 0.5}}>
  <Text style={{opacity: 0.9}}>我要设置0.9的透明度</Text>
</View>

// 正确写法
<View style={{backgroundColor: 'rgba(0, 0, 0, 0.5)'}}>
  <Text style={{opacity: 0.9}}>我要设置0.9的透明度</Text>
</View>

这种方案下父组件的背景是半透明的，子组件的透明度可以完全独立设置，不会受到父级影响。

方案2：调整布局结构，将需要独立透明度的子组件改为同级 #

如果父组件本身的所有内容（除了需要独立透明度的子组件）都需要半透明，可以调整布局层级，将半透明的容器和需要独立透明度的组件改为同级，通过绝对定位控制位置：

<>
  {/* 半透明父容器，内部内容统一继承0.5透明度 */}
  <View style={{opacity: 0.5, width: 300, height: 200, backgroundColor: '#000'}}>
    <Text>其他需要跟随父级半透明的内容</Text>
  </View>
  {/* 独立透明度的文本，和半透明容器同级，不存在继承关系 */}
  <Text style={{
    position: 'absolute',
    top: 50,
    left: 20,
    opacity: 0.9,
    color: '#fff'
  }}>我要设置0.9的透明度</Text>
</>

内容的提问来源于stack exchange，提问作者Hamid khan