如何在 React Native 中将一个图像放置在其他图像之上?

2024-03-06

我将图像放置为根节点,以便使其成为视图的背景。但似乎所有其他图像都变得不可见...... 有没有办法使用内置组件将图像放置在背景之上,而不需要任何插件?
在下面的代码示例中landing-background用作背景,我的logo图像可见,但仅当背景被移除时。
Text毫无顾虑地显示在背景之上......

    <View style={styles.container}>
            <Image source = {require('./img/landing-background.jpg')}
              resizeMode = 'cover' style = {styles.backdrop}>
              <View style = {styles.overlay}>
                <Text style = {styles.headline}>It should appear in front of the Background Image</Text>
    <Image style = {styles.logo} source = {require('./img/logo.png')} />
              </View>

              </Image>
    </View>

var styles = StyleSheet.create({
      container: {
        flex: 1,
        alignItems: 'center',
      },
      overlay: {
        opacity: 0.5,
        backgroundColor: '#000000'
      },
      logo: {
        backgroundColor: 'rgba(0,0,0,0)',
        width: 160,
        height: 52
      },
      backdrop: {
        flex:1,
        flexDirection: 'column'
      },
      headline: {
        fontSize: 18,
        textAlign: 'center',
        backgroundColor: 'rgba(0,0,0,0)',
        color: 'white'
      }
    });

而不是将您的内容包装在<Image>,我认为你最好将其包装在absolute定位元素并使其拉伸以覆盖屏幕。

<View style={styles.container}>
  <View style = {styles.backgroundContainer}>
    <Image source = {require('./img/landing-background.jpg')} resizeMode = 'cover' style = {styles.backdrop} />
  </View>
  <View style = {styles.overlay}>
    <Text style = {styles.headline}>It should appear in front of the Background Image</Text>
    <Image style = {styles.logo} source = {require('./img/logo.png')} />
  </View>
</View>

var styles = StyleSheet.create({
  backgroundContainer: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
  },
  container: {
    flex: 1,
    alignItems: 'center',
  },
  overlay: {
    opacity: 0.5,
    backgroundColor: '#000000'
  },
  logo: {
    backgroundColor: 'rgba(0,0,0,0)',
    width: 160,
    height: 52
  },
  backdrop: {
    flex:1,
    flexDirection: 'column'
  },
  headline: {
    fontSize: 18,
    textAlign: 'center',
    backgroundColor: 'black',
    color: 'white'
  }
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 React Native 中将一个图像放置在其他图像之上? 的相关文章

随机推荐

  • 如何在 Azure Devops Pipeline 中使用 PowerShell 根据条件触发代理作业

    我有一个 PowerShell 如下所示 echo Hello World MyVariable Proceed echo MyVariable 我想做的事 If the 我的变量 is Proceed 只有并且只有那时 Agent Job
  • 在 Mediawiki 中上传时调整图像大小

    理想情况下 我在上传到 mediawiki 的所有图像上调整大小并设置 maxWidth 和 maxHeight 后 看完了文档 https www mediawiki org wiki Manual Image administratio
  • delphi WSDL 导入器有问题

    我正在导入第三方提供的 WSDL 但我对 delphi WSDL 导入器没有成功 当我导入 WSDL 时 delphi WSDL 导入器会隐藏 WSDL 文件中类的实现 WSDL 文件包含一些接受对象作为参数的函数 导入 WSDL 后 de
  • 无法将文本字符串传递到 jquery 函数中?

    我的 jquery 脚本出了什么问题 这是脚本 function debug message body append div message div debug show this debug message in the div 这是我得
  • 字符文字中尾随撇号有什么好处

    我正在编写自己的编程语言 并且现在正在重新考虑语法的许多方面 在许多大多数语言中让我困扰的是尾随撇号在字符文字中 Example带有尾部斜杠 n 没有尾部斜杠 n 为什么新语言 如 rust f e 继续使用尾随撇号 看到这些语言解决了我们
  • 将 ArrayList 转换为 JSONArray

    我在用ArrayList
  • 关于 Spirit.Qi 序列运算符和语义动作的问题

    我对灵气中的序列运算符和语义动作有一些疑问 我正在尝试为接受公制前缀 u m k M 等 以及普通指数形式的浮点数定义语法规则 rule
  • 使用 caliburn micro 设置 RadioButton 签入代码

    我在 WPF 应用程序中的向导中有一个页面 其中有 4 个单选按钮 2 组 我正在使用 Net4 和 Caliburn Micro 单击并设置值时 它会正确绑定到相应的属性 当我离开页面并返回时 我需要在代码中设置属性 并期望通过 Noti
  • NSImage 大小不是某些图片的真实大小?

    我发现有时 NSImage 大小不是真实大小 对于某些图片 而 CIImage 大小始终是真实大小 我正在用这个进行测试image http naturelap files wordpress com 2010 02 mystic natu
  • 如何在 UIImage 顶部绘制形状,同时尊重图像的 alpha 蒙版

    我需要一个可以根据标志以彩色或黑白方式绘制自身的 UIImageView BOOL isGrey 我试图通过在原始图像顶部绘制一个黑色矩形并将石英混合模式设置为颜色来实现此目的 这是可行的 只是它不尊重图像的 alpha 蒙版 见图 替代文
  • 在 Neo4j 中基于数组值创建关系

    我有两个节点代表两个人 Person name John Smith Person name Jane Doe 然后我有第三个节点 代表这两个人共同撰写的文章 Article title Some article Coauthor John
  • 升级到 Windows 10 后,Git-Bash 命令提示符无法打开

    我刚刚将操作系统升级到 Windows 10 Git Bash 甚至无法再打开 我可能需要卸载并重新安装它 但我只是想知道升级到 Windows 10 后是否还有其他人遇到过这个问题 除了卸载和重新安装之外 他们的修复方法是什么 当我的 W
  • 从表单数据填充struts2中的List

    我觉得这应该是非常明显的 但到目前为止我还没有找到答案 我想要一个字符串列表 或一个字符串数组 我真的不在乎 由 Struts2 中的表单数据填充 我看过几个关于如何做的例子bean 的索引属性 https stackoverflow co
  • XCode 7:无法将 OCUnit 转换为 XCTest

    我将 XCode 升级到 7 0 并遇到了编译问题 XCode 要求我将测试目标转换为使用 XCTest 然后我按照向导屏幕进行操作 我无法找到任何测试目标并且无法完成转换 有谁知道如何解决这一问题 Thanks 确保您已选择scheme的
  • 使用 ServiceStack 的 AsyncServiceBase 实现一劳永逸

    我有以下服务 public class AppService AsyncServiceBase
  • 通过改变窗口大小获得不同的标题大小

    我有一个 C 程序 将 TCP 标头表示为结构 include stdafx h TCP HEADER 0 1 2 3 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9
  • 在 Java 中将“\\”替换为“/”

    我正在尝试更换 with 在java Android 中 这似乎不起作用 String rawPath filePath replace 这有什么问题吗 我已经转义了 并尝试转义 但没有用 原始字符串没有任何变化 filePath abc
  • Oracle 正则表达式 - 不以以下开头且不以以下结尾

    以下 Oracle 正则表达式不起作用 我不知道为什么 不以 开头abc abc 不以 结尾abc abc 问题在于 Oracle 正则表达式引擎似乎无法将 abc 字符串识别为一个单元 而只是单独查看字母 括号 应该创建一个字符串单元 所
  • SwiftUI - 动态文本的本地化

    我正在努力解决一些文本字段的本地化问题 通常 如果我要翻译的文本是硬编码的 则 Text 或 TextField 的 正常 本地化在我的应用程序中不会出现任何问题 Text English Text 我将其翻译到我的 Localized s
  • 如何在 React Native 中将一个图像放置在其他图像之上?

    我将图像放置为根节点 以便使其成为视图的背景 但似乎所有其他图像都变得不可见 有没有办法使用内置组件将图像放置在背景之上 而不需要任何插件 在下面的代码示例中landing background用作背景 我的logo图像可见 但仅当背景被移