如何在 react-native 上使用 svg 图像？

Question

我正在尝试在我的本机 React 应用程序上使用 svg 图像，我正在 Android 上开发。

所以我跟着这个教程=>

我有一个错误 Unable to read the 'fill' property of undefined 当我设法显示图像时，所以我尝试降级 react-native-svg 的版本并显示图像，但是一旦我集成了 react-navigation 我的启动时崩溃的应用程序博览会。

所以我找了很长时间来寻找这次崩溃的原因。

我试图删除 react-native-svg 库，metroconfig.js 文件，expo 再次运行，我不知道这是不是问题的原因。

我想知道人们是否遇到过这些问题，或者如果没有，与当前版本的 RN 一起在 react-native 应用程序中导入 svg 图像的最佳方法是什么？

预先感谢您的帮助和回答。

编辑

我使用最新版本的 react native / expo / sdk expo 测试了 react-native-svg 和 react-native-transformer-svg

从我创建 Metro.config.js 文件并通过更新 app.json 文件将其与 expo 链接的那一刻起，我的 expo 应用程序在启动时崩溃。

我不得不使用 react-native-svg 而没有 react-native-transformer-svg，也就是说我必须将 SVG 文件转换为可响应的 SVG 文件。

如果有人有自动导入 svg 文件的有效解决方案，那对我会有很大帮助。

Answer 1

Install react-native-svg-transformer

npm i react-native-svg-transformer --save

我使用 SVG 如下，效果很好

import LOGOSVG from "assets/svg/logo.svg"
in render

<View>
  <LOGOSVG 
    width="100%"
    height="70%"
  />
</View>