20

我一直在尝试开发下面提到的屏幕：

为此，我创建了以下组件：

import React, {Component} from 'react';
import {View, Text, StyleSheet, ImageBackground, Image} from 'react-native';
import Balance from './Balance.js'

class AccountHeader extends React.Component{
    render(){
        return(
            <ImageBackground
                source={require('../images/lawrance.jpg')}
                style={styles.container}>
                    <View style={styles.overlay}></View>
                    <Text style = {[styles.textStyle, {paddingTop: 10}]} >My Account</Text>
                    <Image source= {require('../images/lawrance.jpg')}
                        style={styles.avatarStyle}/>
                    <Text style = {styles.textStyle} > Jenifer Lawrance</Text>
                    <Text style = {styles.textStyle} > +14155552671</Text>
                    <Balance style= {styles.balanceContainer}/>
            </ImageBackground>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor:'red',
        opacity: 0.6
    },
    overlay: {
        backgroundColor:'transparent',
        opacity: 0.6
    },
    avatarStyle: {
        width:100, 
        height: 100,
        marginTop: 10,
        borderRadius: 50,
        alignSelf: 'center',
    },
    textStyle: {
        marginTop: 10,
        fontSize: 18,
        color: "#FFFFFF",
        fontWeight: 'bold',
        alignSelf: 'center',
    },
    balanceContainer:{
        padding:10,
    }
  });

export default AccountHeader;

现在有两个问题：

  1. 改变不透明度ImageBackground也改变其孩子的不透明度
  2. 无法更改不透明度的颜色

任何帮助表示赞赏！

设计画面：

在此处输入图像描述

显影画面

在此处输入图像描述

4

4 回答 4

54

尝试这个 ：

<ImageBackground source={require('./images/backgroundBlue.jpg')} imageStyle= 
{{opacity:0.5}}/>

有用

于 2019-04-27T16:52:18.313 回答
30

使用此代码，它正在工作，我只是做了一个小改动 

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

class AccountHeader extends React.Component{
    render(){
        return(
            <ImageBackground
                source={{uri:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSoOVTmb0ILbDI6ggGhPKUkn3v4UKc2dNB-Kjng7aGM14UbvzKY'}}
                style={styles.container}>
                    <View style={styles.overlay}>
                    <Text style = {[styles.textStyle, {paddingTop: 10}]} >My Account</Text>
                    <Image source= {{uri:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSoOVTmb0ILbDI6ggGhPKUkn3v4UKc2dNB-Kjng7aGM14UbvzKY'}}
                        style={styles.avatarStyle}/>
                    <Text style = {styles.textStyle} > Jenifer Lawrance</Text>
                    <Text style = {styles.textStyle} > +14155552671</Text>
                    </View>
            </ImageBackground>
        );
    }
}     

const styles = StyleSheet.create({
  container: {

},            
overlay: {
    backgroundColor:'rgba(255,0,0,0.5)',
},
    avatarStyle: {
        width:100, 
        height: 100,
        marginTop: 10,
        borderRadius: 50,
        alignSelf: 'center',
    },
    textStyle: {
        marginTop: 10,
        fontSize: 18,
        color: "#FFFFFF",
        fontWeight: 'bold',
        alignSelf: 'center',
    },
    balanceContainer:{
        padding:10,
    }
  });

export default AccountHeader;
于 2018-03-21T06:16:51.337 回答
8

对我来说，只需对 ImageBackground 组件应用一些不透明度，同时使用这样的背景颜色：

<ImageBackground source={background} style={{ width: window.width, height: window.height - 24, backgroundColor: 'rgb(255,0,0)' }} resizeMode="cover" imageStyle={{opacity: 0.4}} >
</ImageBackground>
于 2019-05-09T00:06:53.047 回答
4

尝试将容器的样式更改为

container: { 
 backgroundColor: 'rgba(255,0,0,.6)'
},
于 2018-03-21T05:59:53.267 回答