React-Native：更改 ImageBackground 的不透明度颜色

Posted 2023-02-22

【中文标题】React-Native：更改 ImageBackground 的不透明度颜色

【英文标题】：React-Native: Change opacity colour of ImageBackground

【发布时间】：2018-08-30 03:31:29

【问题描述】：

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

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

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 > [phone]</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;

现在有两个问题：

更改 ImageBackground 的不透明度也会更改其子项的不透明度 无法更改不透明度的颜色

任何帮助表示赞赏！

设计画面：

开发屏幕

【问题讨论】：

您是否尝试删除容器的不透明度？根据给定的样式，容器还包含不透明度值，因此整个容器都会受到影响。

@rohan kangale：是的。但我想在背景图像上应用不透明度。

backgroundColor="rgba(32,36,100,0.6)" 像这样使用背景颜色

@Paras Watts：根本不工作！请注意它是“ImageBackground”而不是图像

尝试将图像移到 ImageBackground 之外（您还需要更改样式）。

【参考方案1】：

试试这个：

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

有效

【讨论】：

这真的是正确答案，非常感谢:)

这个解决了问题 imageStyle= opacity:0.5

【参考方案2】：

使用这段代码，它可以工作，我只是做了一个小改动

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 > [phone]</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;

【讨论】：

这是一条神奇的线：backgroundColor:'rgba(255,0,0,0.5)',

【参考方案3】：

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

<ImageBackground source=background style= width: window.width, height: window.height - 24, backgroundColor: 'rgb(255,0,0)'  resizeMode="cover" imageStyle=opacity: 0.4 >
</ImageBackground>

【参考方案4】：

尝试将容器的样式更改为

container:  
 backgroundColor: 'rgba(255,0,0,.6)'
,

【讨论】：

我的 react-native 函数不支持这个函数。孩子们也会在这里得到不透明度吗？

这对我有用，图像背景中的一些不透明度不是孩子