React-Native:更改ImageBackground的不透明度颜色
React-Native:更改ImageBackground的不透明度颜色
提问于 2018-03-21 13:52:53
我一直在尝试开发下面提到的屏幕：
为此，我创建了以下组件：
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;现在有两个问题：
- 更改
ImageBackground的不透明度也会更改其子对象的不透明度 - 无法更改不透明度
的颜色
感谢任何人的帮助！
设计屏幕：
开发的屏幕
回答 4
Stack Overflow用户
回答已采纳
发布于 2018-03-21 14:16:51
使用这段代码，它是有效的，我只是做了一个小改动
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;Stack Overflow用户
发布于 2019-04-28 00:52:18
试试这个：
<ImageBackground source={require('./images/backgroundBlue.jpg')} imageStyle=
{{opacity:0.5}}/> 它起作用了
Stack Overflow用户
发布于 2019-05-09 08:06:53
对于我来说，只需要在ImageBackground组件上应用一些不透明度，同时使用如下的背景色：
<ImageBackground source={background} style={{ width: window.width, height: window.height - 24, backgroundColor: 'rgb(255,0,0)' }} resizeMode="cover" imageStyle={{opacity: 0.4}} >
</ImageBackground>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49399114
复制相关文章
相似问题