35

在我对 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,0,0)',
    color: 'white'
  }
});
4

4 回答 4

53

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

“与儿童一起使用已被弃用，并且在不久的将来会出现错误。请重新考虑布局或改用。”

请参阅文档 https://reactnative.dev/docs/images#background-image-via-nesting

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'
  }
});
于 2015-03-27T12:35:04.077 回答
8

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

" <Text>元素继承了其父<View>的背景颜色，但这种行为会导致更多的烦恼，这在我看来很有帮助。一个简单的例子是带有嵌套<Text>的<Image>。文本节点将采用背景颜色或父视图将隐藏图像。然后我们必须在文本节点上设置backgroundColor: 'transparent'来修复它。

这种行为在 Android 上也不会发生，默认情况下<Text>节点总是具有透明背景。当在 Android 上开发一些东西然后在 iOS 上测试它时，这会引起一些惊喜。” - https://github.com/janicduplessis

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

像上面科林说的最简单的方法就是将容器的backgroundColor设置为rgba(0,0,0,0)

于 2016-11-18T13:33:57.327 回答
7

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

请注意，如果您将backgroundColor容器transparent的 rgba(0,0,0,0)但是我认为可以将其解释为错误，因为这不是人们所期望的行为，感觉就像某种堆叠问题。

于 2015-03-27T15:04:04.960 回答
2

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

于 2015-04-24T23:33:10.697 回答