Question

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

当前结果

enter image description here

渲染功能

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

Answer 1

请注意：这个答案现在已经过时了。这适用于React Native在2015年开源的那一天。今天这种方式已被弃用。

您可以在View内添加Image，如下所示：

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

Answer 2

backgroundColor：'透明' 这实际上是一种性能优化，而且相当激进。

“＆lt; Text＆gt; 元素会继承其父＆lt; View＆gt; 的背景颜色，但这种行为会导致更多烦恼，这在我看来很有帮助。示例是带有＆lt; Text＆gt; 的＆lt; Image＆gt; 。文本节点将采用背景颜色或父视图，并隐藏图像。我们必须在文本节点上设置 backgroundColor：'transparent'来修复它。

这种行为在Android上也不会发生，＆lt;默认情况下，文字＆gt; 节点始终具有透明背景。这会在Android上开发内容然后在iOS上进行测试时产生一些惊喜。“ - https://github.com/janicduplessis

这是来自用户将其作为问题提出的讨论。在此处阅读更多内容 - https://github.com/facebook/react-native/issues/7964

像Colin上面说的最简单的方法是将容器的 backgroundColor 设置为 rgba（0,0,0,0）

Answer 3

在内部，我看到React Native确实将alpha值和transparent的特殊情况转换为具有alpha值的正确UIColor，因此这方面的工作正常，并且很容易通过实验验证。

请注意，如果您将容器的backgroundColor设置为transparent（或rgba(0,0,0,0)），那么您还会获得一个透明的文本块 - 该知识可以帮助您解决此问题。但是我认为可以把它解释为一个bug，因为这不是人们所期望的行为，感觉就像某种堆叠问题。

Answer 4

我遇到了同样的问题。尝试从容器样式中删除backgroundColor: '#000000',。不知道为什么，但在这种情况下似乎使用了顶级组件的背景颜色。

渲染文本框与透明背景在React Native iOS中的图像顶部

4 个答案: