渲染文本框与透明背景在React Native iOS中的图像顶部 [英] Render text box with transparent background on top of image in React Native iOS

问题描述

我正在尝试在我的React Native测试中在图像上渲染一个带有白色文本的块。但相反，我的图像上面有一个黑色的块，里面有白色文字。不是我所期待的。如何渲染具有透明背景的文本块？

I'm trying to render a block with white text on top of an image in my testing of React Native. But instead i get a black block on top of my image with white text in it. Not what I had expected. How do you render a text block with transparent background?

当前结果

渲染功能

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年开源的那一天。今天这种方式已被弃用。

您可以通过在<$中添加查看来实现此目的c $ c>图像如下所示：

You can accomplish this by adding a View inside the Image like so:

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

这篇关于渲染文本框与透明背景在React Native iOS中的图像顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！