在我的React Native测试中，我试图在图像的顶部渲染一个带有白色文本的块。但是，我的图像顶部有一个黑色块，其中有白色文字。不是我预期的如何渲染具有透明背景的文本块？
当前结果
渲染功能
render: function(){
return (
<View style={styles.container}>
<Image
style={styles.backdrop}
source={{uri: 'https://unsplash.com/photos/JWiMShWiF14/download'}}>
<Text style={styles.headline}>Headline</Text>
</Image>
</View>
);
)
样式表功能
var styles = StyleSheet.create({
container: {
flex: 1,justifyContent: 'flex-start',alignItems: 'center',backgroundColor: '#000000',width: 320
},backdrop: {
paddingTop: 60,width: 320,height: 120
},headline: {
fontSize: 20,textAlign: 'center',backgroundColor: 'rgba(0,0)',color: 'white'
}
});
您可以通过在图像中添加视图来完成此操作：
render: function(){
return (
<View style={styles.container}>
<Image
style={styles.backdrop}
source={{uri: 'https://unsplash.com/photos/JWiMShWiF14/download'}}>
<View style={styles.backdropView}>
<Text style={styles.headline}>Headline</Text>
</View>
</Image>
</View>
);
)
样式表功能
var styles = StyleSheet.create({
container: {
flex: 1,backdropView: {
height: 120,},color: 'white'
}
});
