在我的 React Native 测试中,我试图在图像顶部呈现一个带有白色文本的 block 。但相反,我在我的图像顶部得到了一个黑色 block ,里面有白色文本。不是我所期望的。如何渲染具有透明背景的文本 block ?
当前结果
渲染函数
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,0,0)',
color: 'white'
}
});
最佳答案
请注意:这个答案现在已经过时了。这适用于 React Native 在 2015 年开源的那一天。今天这种做法已被弃用。
"Using with children is deprecated and will be an error in the near future. Please reconsider the layout or use instead."
See the docs https://reactnative.dev/docs/images#background-image-via-nesting
您可以通过在 Image
中添加一个 View
来完成此操作,如下所示:
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,
justifyContent: 'flex-start',
alignItems: 'center',
backgroundColor: '#000000',
width: 320
},
backdrop: {
paddingTop: 60,
width: 320,
height: 120
},
backdropView: {
height: 120,
width: 320,
backgroundColor: 'rgba(0,0,0,0)',
},
headline: {
fontSize: 20,
textAlign: 'center',
backgroundColor: 'rgba(0,0,0,0)',
color: 'white'
}
});
关于ios - 在 React Native iOS 中的图像顶部呈现具有透明背景的文本框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29300732/