[英]Text Overlay Image with Darkened Opacity React Native
I am attempting to overlay a title over an image - with the image darkened with a lower opacity. 我试图在图像上叠加标题 - 图像以较低的不透明度变暗。 However, the opacity effect is changing the overlaying text as well - making it dim.
但是,不透明效果也会改变叠加文本 - 使其变暗。 Any fix to this?
有什么解决方法吗? Here is what is looks like:
这是看起来像:
And here is my code for the custom component (article preview - which the above image is a row of article preview components): 这是我的自定义组件的代码(文章预览 - 上面的图像是一行文章预览组件):
//component for article preview touchable image
/* will require the following
- rss feed and api
- user's keyword interests from parse In home.js
- parse db needs to be augmented to include what they heart
- parse db needs to be augmented to include what they press on (like google news)
*/
var React = require('react-native');
var {
View,
StyleSheet,
Text,
Image,
TouchableHighlight,
} = React;
//dimensions
var Dimensions = require('Dimensions');
var window = Dimensions.get('window');
var ImageButton = require('../../common/imageButton');
var KeywordBox = require('../../authentication/onboarding/keyword-box');
//additional libraries
module.exports = React.createClass({
//onPress function that triggers when button pressed
//this.props.text is property that can be dynamically filled within button
/* following props:
- source={this.props.source}
- onPress={this.props.onPress}
- {this.props.text}
- {this.props.heartText}
- key={this.props.key}
- text={this.props.category}
- this.props.selected
*/
render: function() {
return (
<TouchableHighlight
underlayColor={'transparent'}
onPress={this.props.onPress} >
<Image
source={this.props.source}
style={[styles.articlePreview, this.border('red')]}>
<View style={[styles.container, this.border('organge')]}>
<View style={[styles.header, this.border('blue')]}>
<Text style={[styles.previewText]}>{this.props.text}</Text>
</View>
<View style={[styles.footer, this.border('white')]}>
<View style={[styles.heartRow, this.border('black')]}>
<ImageButton
style={[styles.heartBtn, , this.border('red')]}
resizeMode={'contain'}
onPress={this.onHeartPress}
source={require('../../img/heart_btn.png')} />
<Text style={[styles.heartText]}>{this.props.heartText + ' favorites'}</Text>
</View>
<KeywordBox
style={[styles.category, this.border('blue')]}
key={this.props.key}
text={this.props.category}
onPress={this.props.categoryPress}
selected={this.props.selected} />
</View>
</View>
</Image>
</TouchableHighlight>
);
},
onHeartPress: function() {
//will move this function to a general module
},
border: function(color) {
return {
//borderColor: color,
//borderWidth: 4,
}
},
});
var styles = StyleSheet.create({
heartText: {
color: 'white',
fontSize: 12,
fontWeight: 'bold',
alignSelf: 'center',
marginLeft: 5,
fontFamily: 'SFCompactText-Medium'
},
heartRow: {
flexDirection: 'row',
justifyContent: 'space-around',
alignSelf: 'center',
justifyContent: 'center',
},
heartBtn: {
height: (92/97)*(window.width/13),
width: window.width/13,
alignSelf:'center',
},
category: {
fontFamily: 'Bebas Neue',
fontSize: 10,
fontWeight: 'bold'
},
header: {
flex: 3,
alignItems: 'center',
justifyContent: 'space-around',
marginTop: window.height/30,
},
footer: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
margin: window.height/50,
},
container: {
flex: 1,
backgroundColor: 'black',
opacity: 0.6,
},
articlePreview: {
flex: 1,
height: window.height/3.2,
width: window.width,
flexDirection: 'column'
},
previewText: {
fontFamily: 'Bebas Neue',
fontSize: 23,
color: 'white',
alignSelf: 'center',
textAlign: 'center',
margin: 5,
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0
},
});
Try changing the container's style to 尝试将容器的样式更改为
container: {
flex: 1,
backgroundColor: 'rgba(0,0,0,.6)'
},
Opacity will affect the entire view. 不透明度将影响整个视图。 Try having 2 views instead.
尝试改为2次观看。 One that's absolutely positioned with the image contained.
一个绝对定位的图像包含。 Another with your text and button content.
另一个带有您的文字和按钮内容。
You can absolutely position a view using position : "absolute", top: 0, left: 0 您可以使用position绝对定位视图:“absolute”,top:0,left:0
I solve my work with Background inside Image tag and It works fine. 我使用Background里面的Image标签解决了我的工作,它运行正常。 like this
像这样
<Image source={require('./img/2.jpg')} style=
{{height:deviceRowHeight,width:deviceWidth}}>
<View style={{backgroundColor:'rgba(0,0,0,.6)',
height:deviceRowHeight,width:deviceWidth}}>
<Text> Test Text </Text>
</View>
</Image>
Instead of applying the opacity to entire ImageBackground element, implement it on the image itself Eg. 而不是将不透明度应用于整个ImageBackground元素,而是在图像本身上实现它。
<ImageBackground style={styles.imageContainer}
imageStyle={{ opacity: 0.5 }}
source={require('../assets/images/background.png')}>
<View style={styles.welcomeContainer}>
<Image source={require('../assets/images/zeptagram-logo.png')} style={styles.welcomeImage} />
</View>
</ImageBackground>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.