父母和孩子的反应本机样式不透明度

Question

react-native:我有一个View,View的子项是一个Image,我应用了opacity:0.5 for View和opacity:0.9 for a Image但它不适用于Image,父opacity正在申请child,孩子不采取独立的不透明

Answer 1

尝试使用背景颜色的alpha值更改不透明度.那么应该可以为儿童应用不同的不透明度.

例如:

<View style={{backgroundColor: 'rgba(0,0,0,0.5)'}}/>

很显然，这只会更改背景的不透明度，而不会更改元素本身，因此，如果元素包含文本或具有其他背景的子元素，则不会有任何接近所需行为的内容。Hemanta的答案就是要走的路。 (3认同)

Answer 2

除了松林的答案:

<View style={{backgroundColor: '#FFFFFF50'}} />

背景颜色"50"的最后一部分表示不透明度%.

一件事，“50”并不表示“50%”。请参阅[此]（https://hashnode.com/post/understanding-rrggbbaa-color-notation-cisvdr52x088fwt53h1drf6m2）。顺便说一句，chrome 的颜色选择器可以将 `rgba` 值转换为 `rrggbbaa`。 (4认同)

Answer 3

在react-native 0.6中,您可以在视图上使用不透明度道具.例:

<View opacity={1.0} />

<View opacity={0.5} />

O =不透明

1 =清楚

Answer 4

你需要needsOffscreenAlphaCompositing这样使用 -

<View needsOffscreenAlphaCompositing>
...
<View/>

Answer 5

如果您想以透明的Alpha透明度显示一些文本，那么我有最好的方法，请尝试。

TransparentBG:{
    backgroundColor:  '#00000070',
    color:'#FFFFFF'
  }

此处，“ 70”表示不透明度％。-谢谢