Question

我的应用程序有一个背景图片，该图片的上方略微透明，为背景图片提供了蓝色。我现在正在尝试将应用程序徽标放置在这些视图的顶部，但是当我这样做时，徽标似乎具有提供色彩的视图的不透明性。

我对原生语言反应很新，但是我基本上需要具备：背景图像>视图>徽标。

为了说明我的意思，应用程序徽标应如下所示：

但是它目前看起来像是被洗掉了：

App.js

import React, { Component } from 'react';
import { View, Text, ImageBackground } from 'react-native';
import Logo from './Logo';

class App extends Component {

    render() {
        return (
                <ImageBackground
                    source={require('./images/city.png')}
                    style={styles.backgroundStyle}
                >
                    <View style={styles.backgroundOverlayStyle}>
                        <Logo />
                    </View>
                </ImageBackground>
        );
    }
}

const styles = {
    backgroundStyle: {
        flex: 1,
        backgroundColor: '#000000',
        width: '100%',
        height: '100%'
    },
    backgroundOverlayStyle: {
        flex: 1,
        backgroundColor: '#003284',
        opacity: 0.5
    }

};

export default App;

Logo.js

import React from 'react';
import { View, Image } from 'react-native';

const Logo = () => {
    const { logoStyle } = styles;
    return (
        <View style={styles.container}>
            <Image style={logoStyle} source={require('./images/request-first-logo-white.png')} />
        </View>
    );
};

const styles = {
    container: {
        alignItems: 'center',
        justifyContent: 'center',
        opacity: 1,
    }, 

    logoStyle: {
        width: '70%',
        height: '65%',
        resizeMode: 'contain',
        //backgroundColor: 'blue'
    }
};

export default Logo;

谢谢您的帮助。

Answer 1

您需要为ImageBackground定义blurRadius

 import React, { Component } from 'react';
 import { View, Text, ImageBackground,Image } from 'react-native';

 const Logo = () => {
 const { logoStyle } = styles;
 return (
    <View style={styles.container}>
        <Image  style={logoStyle} source={{uri:'https://www.what-dog.net/Images/faces2/scroll001.jpg'}} />
    </View>
);
};

export default class App extends Component {

render() {
    return (
            <ImageBackground
                source={{uri : 'https://pngstocks.com/wp-content/uploads/2018/03/cb-background-10.jpeg'}}
                style={styles.backgroundStyle}
                blurRadius={30}
            >
                    <Logo />
            </ImageBackground>
    );
  }
}

const styles = {
    backgroundStyle: {
    flex: 1,
    backgroundColor: '#000000',
    width: '100%',
    height: '100%'
},
backgroundOverlayStyle: {
    flex: 1,
    backgroundColor: '#003284',
},
container: {
  alignItems: 'center',
  justifyContent: 'center',
 }, 

logoStyle: {
  width: 100,
  height: 100,
  resizeMode: 'contain',
  //backgroundColor: 'blue'
 }
};

放置在视图中时图像变得透明

1 个答案: