在我的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'
- }
- });
