Question

react-native：我有一个View，View的子项是一个Image，我应用了不透明度：0.5用于View和不透明度：0.9用于图像，但它不适用于Image，父不透明度正在应用对于孩子，孩子不会独立不透明

Answer 1

尝试使用背景颜色的alpha值更改不透明度。那么应该可以为孩子们应用不同的不透明度。

例如：

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

Answer 2

除了松林的回答：

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

背景颜色的最后一部分＆＃34; 50＆＃34;表示不透明度％。

Answer 3

在react-native 0.6中，可以在View上使用不透明度道具。示例：

<?php echo do_shortcode('[send-notification token=XXXX message="hello"]'); ?>

1.0 =不透明（alpha == 1.0）

0.0 =清除（alpha == 0.0）

请参见https://facebook.github.io/react-native/docs/0.6/view-style-props#opacity

小吃：https://snack.expo.io/S1KjXqe6N

Answer 4

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

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

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

Answer 5

您需要像这样使用needsOffscreenAlphaCompositing-

<View needsOffscreenAlphaCompositing>
...
<View/>

Answer 6

您不能在不影响孩子的情况下更改父级不透明度，因此您应该具有绝对定位的背景。为了正确放置孩子，您应该添加一个额外的容器。看看这小吃：快餐.expo.io / SkaHLjzr8

...
<View style={styles.container}>
  <View style={styles.card} >
    <View style={styles.background} />
     <View style={styles.imageContainer}>
      <Image style={styles.image} source="..." />
    </View>
  </View>
</View>
...

...
container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  background: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'blue',
    opacity: .5,
    zIndex: 1,
  },
  card: {
    height: 400,
  },
  imageContainer: {
    ...StyleSheet.absoluteFillObject,
    justifyContent: 'center',
    alignItems: 'center',
    zIndex: 2,
    opacity: 0.8,
  },
  image: {
    width: 200,
    height: 200
  }
...

Answer 7

破解背景不透明度

使用 2 个 backgroundColor 的组合来模仿不透明度

有时玩了一段时间后迷失在互联网上找到一个简单的解决方案，我意识到在当前的 React-Native 版本 V 0.64 背景的不透明度，至少因为它通常用于 Web Dev不适合 React-Native。

应用程序

使用 ImageBackground 组件 --> DOCS：

在 ImageBackground

上设置背景图片

    import React from 'react';
    import { ImageBackground, View, Text, StyleSheet, ScrollView} from 'react-native';

    const App = () => {
        
    return (

    <ImageBackground style={ mainStyle.background } source={ { uri: "https://reactjs.org/logo-og.png" } } resizeMode="cover">       
        <ScrollView style={ mainStyle.overlay }> // Here its style will be used as opacity
            <View style={ mainStyle.containerCenter}>
                <View style={ mainStyle.homeTitleWraper}>
                    <Text style={ mainStyle.homeTitle }> Hello WOrld</Text>
                </View>              
            </View>
        </ScrollView>   
    </ImageBackground>
    );};
  export default App;

风格

风格，这里背景的第一个孩子必须采取整体屏幕大小，样式为 overlay 时，它会像铺在背景上的薄毯子一样，模仿不透明度。

 const mainStyle = StyleSheet.create({

 background: {
     width: "100%",
     height: "100%", 
 },

 overlay: {
     backgroundColor: 'rgba(255, 255, 255, .5)' // HERE USE THE LAST DIGIT AS IF IT WERE OPACITY

 },

 containerCenter : {
     flexDirection: "column",
     justifyContent: "center",
     alignItems: "center",
     paddingHorizontal: 30,
     marginVertical: 60,

 },

 homeTitleWraper: {
     paddingHorizontal: 40,
     paddingVertical: 100,  

 },

 homeTitle: {
     fontSize: 40,
     fontWeight: "900",
     textAlign: "center",
     textTransform: "uppercase",  
     color: "white",
     fontStyle: "italic",
 },

 containerSmall: {
     marginVertical: 10,
     width: "100%"

 }

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

7 个答案:

破解背景不透明度

应用程序

风格