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

Posted 2023-02-16

【中文标题】在 React Native iOS 中的图像顶部呈现具有透明背景的文本框

【英文标题】：Render text box with transparent background on top of image in React Native iOS

【发布时间】：2015-05-31 18:49:01

【问题描述】：

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

【问题讨论】：

小心，现在已弃用：" 不建议将 与孩子一起使用，并且在不久的将来会出错。请重新考虑布局或改用 。"

【参考方案1】：

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

“与孩子一起使用已被弃用，将在 不远的将来。请重新考虑布局或使用 而是。”

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

【讨论】：

错字，将欢迎替换为已定义的标题。

工作得很好。非常感谢

是的@blacksun，但你可以使用ImageBackground，我已经用过并且效果很好

尝试这样做会导致错误：<Image> 组件不能包含子组件。

【参考方案2】：

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

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

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

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

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

【参考方案3】：

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

【参考方案4】：

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

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