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

Question

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

Answer 1

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

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

Answer 2

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

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

Answer 3

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

Answer 4

背景颜色：'transparent' 这实际上是一种性能优化，而且相当激进。

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

此行为也不会发生在 Android 上，< Text > 节点默认始终具有透明背景。当在 Android 上开发某些东西然后在 iOS 上测试它时，这会引起一些意外。”- https://github.com/janicduplessis

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

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

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

Render text box with transparent background on top of image in React Native iOS

ios

react-native