Javascript React-Native：更改 ImageBackground 的不透明度颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49399114/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React-Native: Change opacity colour of ImageBackground
提问by AndiGeeky
I have been trying to develop screen mentioned below:
我一直在尝试开发下面提到的屏幕：
For that I have created below component:
为此，我创建了以下组件：
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;
Now here are two issues:
现在这里有两个问题：
- Changing the opacity of
ImageBackgroundalso change the opacity of its children - Not able to change the color of opacity
- 改变不透明度
ImageBackground也会改变它的孩子的不透明度 - 无法改变不透明度的颜色
Any help appreciated!
任何帮助表示赞赏！
Design screen:
设计画面：
Developed Screen
开发画面
回答by L.G
Try this :
尝试这个 ：
<ImageBackground source={require('./images/backgroundBlue.jpg')} imageStyle=
{{opacity:0.5}}/>
it works
有用
回答by Paras Watts
Use this code, it's working, I just made a minor change
使用此代码，它的工作，我只是做了一个小改动
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;
回答by Julian Torregrosa
For me worked just applying some opacity to the ImageBackground component and at the same time a background color like this:
对我来说，我只是对 ImageBackground 组件应用了一些不透明度，同时应用了这样的背景颜色：
<ImageBackground source={background} style={{ width: window.width, height: window.height - 24, backgroundColor: 'rgb(255,0,0)' }} resizeMode="cover" imageStyle={{opacity: 0.4}} >
</ImageBackground>
回答by Birbal Singh
Try changing the container's style to
尝试将容器的样式更改为
container: {
backgroundColor: 'rgba(255,0,0,.6)'
},
