如何在 React Native 上显示 SVG 文件?

2024-05-18

我想显示 svg 文件(我有一堆 svg 图像),但我找不到显示的方式。我尝试使用Image and Use的组成部分反应本机 svg https://github.com/magicismight/react-native-svg但他们不这样做。我尝试用原生方式做到这一点,但仅显示 svg 图像确实很困难。

示例代码:

import Svg, {
  Use,
  Image,
} from 'react-native-svg';

<View>
  <Svg width="80" height="80">
     <Image href={require('./svg/1f604.svg')} />
  </SvgRn>
</View>

我也知道 React Native 基本上不支持 svg 但我认为有人用棘手的方式解决了这个问题(有/没有react-native-svg)


我使用了以下解决方案:

  1. Convert .svg图像到 JSXhttps://svg2jsx.herokuapp.com/ https://svg2jsx.herokuapp.com/
  2. 将 JSX 转换为react-native-svg组件与https://react-svgr.com/playground/?native=true https://react-svgr.com/playground/?native=true(确保选中“React Native”复选框)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 React Native 上显示 SVG 文件? 的相关文章

随机推荐

  • 在 dart 中使用括号表示法访问对象的属性

    我尝试执行以下操作 var properties height width for var prop in properties div style prop otherdiv style prop 但是 dart 似乎不接受这种括号表示法
  • 使用 fopen() 包装器创建 ZIP 文件

    如何使用以下命令创建 ZIP 文件fopen 包装器 http es php net manual en wrappers compression php 这显然是not道路
  • Intellij 中的 Google OR-Tools:UnsatisfiedLinkError

    我正在建立一个应该使用 Google OR Tools 的 java 框架 下面的代码编译成功 但在运行时抛出异常 Exception in thread main java lang UnsatisfiedLinkError com go
  • Scala 的“神奇”函数列表

    在哪里可以找到 Scala 的 神奇 函数列表 例如apply unapply update etc 魔法函数是指编译器的某些语法糖使用的函数 例如 o update x y lt gt o x y 我用谷歌搜索了一些组合scala mag
  • 使用 Laravel Websockets 绑定 Laravel Echo 上的回调

    我想知道我的用户何时出现连接错误或连接断开 我读过很多文章说这是可能的 但我没有得到任何结果 我开始认为这可能是第三方的问题https github com beyondcode laravel websockets https githu
  • Visual Studio 2017 Professional-无法在源代码中找到包

    我试图通过 nuget 包管理器 gt 包管理器控制台以及直接从解决方案管理 Nuget 包来添加包 我正在尝试安装Newtonsoft Json从包管理器这样Install Package Newtonsoft Json但无法从源头找到
  • 使用officer R导出时如何提高ggplots的分辨率

    我想将图表导出到 PPT 并使用Officer 包来实现相同的目的 但是 图表的默认分辨率较低 我想更改它 我目前正在使用以下电话 ph with gg p1 type chart res 1200 其中 p1 是 ggplot 对象 运行
  • 如何使 Windows 窗体的关闭按钮不关闭窗体但使其不可见?

    该表单有一个 NotifyIcon 对象 当用户单击 关闭 按钮时 我希望表单不关闭而是变得不可见 然后 如果用户想再次查看该表单 可以双击系统托盘中的图标 如果用户想关闭表单 可以右键单击该图标并选择 关闭 有人可以告诉我如何使关闭按钮不
  • 即使 Android M 上的移动数据已打开(有连接),也可以通过 WiFi(无连接)发送请求

    我必须在没有互联网连接的情况下将 UDP 数据包发送到 WiFi 模块 配有自己的 AP 但是当我将手机连接到 AP 时 Android 会在移动数据接口上重定向我的数据包 因为它有互联网连接 我使用下面的代码来完成我的工作 但它似乎不适用
  • iOS 循环对象的属性并添加操作

    我有一个具有几个类似属性的类 UISliders 我想添加用户开始和结束使用每个滑块时的操作 每个滑块都将链接到同一个选择器 因此我考虑只是迭代它们 而不是编写 10 个几乎相同的代码块 问题是 最有效的方法是什么 我尝试过这样的事情 在运
  • 如何判断我是否通过脚本登录到私有 Docker 注册表?

    如何判断我是否通过脚本登录到私有 Docker 注册表服务器 换句话说 有docker login some registry com已成功运行 并且仍然有效 注意 我问的是任意私有注册表 而不是docker io注册表 如果 docker
  • 如何验证文件名称在 Windows 中是否有效?

    是否有一个 Windows API 函数可以将字符串值传递给该函数 该函数将返回一个指示文件名是否有效的值 我需要验证文件名是否有效 并且我正在寻找一种简单的方法来完成此操作 而无需重新发明轮子 我正在直接使用 C 但针对的是 Win32
  • 异步迭代器

    我有以下代码 while slowIterator hasNext performLengthTask slowIterator next 由于迭代器和任务都很慢 因此将它们放入单独的线程中是有意义的 这是对迭代器包装器的快速而肮脏的尝试
  • 立体太阳图 matplotlib 极坐标图 python

    我正在尝试创建一个与以下类似的简单的立体太阳路径图 http wiki naturalfrequent com wiki Sun Path Diagram http wiki naturalfrequency com wiki Sun Pa
  • 无法使用已与其底层 RCW 分离的 COM 对象。在 oledb 中

    我收到此错误 但我不知道我做错了什么 下面的代码在backrgroundworker中 将异常详细信息复制到剪贴板 System Runtime InteropServices InvalidComObjectException 未处理 通
  • IIF(...) 不是公认的内置函数

    我正在尝试在 Microsoft SQL Server 2008 R2 中使用它 SET SomeVar SomeOtherVar IIF SomeBool value when true value when false 但我收到一个错误
  • 在 IntelliJ 中运行 Spring Boot 会导致 Unable to load 'javax.el.E​​xpressionFactory'

    我正在尝试运行一个简单的 Spring Boot 应用程序 该应用程序具有以下 Maven pom file
  • 访问私人成员[关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 通过将类的私有成员转换为 void 指针 然后转换为结构来访问类的私有成员是否合适 我认为我无权修改包含我需要访问的数据成员的类 如果不道德 我
  • 填充 CoreData 创建的 sqlite 数据库

    我有一个由 CoreData 模型自动创建的 sqlite DB 但我的应用程序不会让用户能够将数据写入其中 而是我想用程序所需的所有数据预先填充它 我的问题是 CoreData 创建的 sqlite DB 具有未知的表和字段 这些表和字段
  • 如何在 React Native 上显示 SVG 文件?

    我想显示 svg 文件 我有一堆 svg 图像 但我找不到显示的方式 我尝试使用Image and Use的组成部分反应本机 svg https github com magicismight react native svg但他们不这样做