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

Question

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

所以我跟着这个教程=>

https://medium.com/faun/add-custom-svg-icons-to-your-expo-app-279b492f6a15

我有一个错误 Unable to read the 'fill' property of undefined while 我设法显示图像，所以我尝试降级 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

重要说明 - 我在真正的 Android 设备上开发，而不是在 Expo 上！

这是 Github 上打开的一个问题中的一些代码，经过一些修改后实际上对我有用。

链接到 Github 问题

在我的metro.config.js文件中，我终于有了这个代码：

const { getDefaultConfig } = require("metro-config")

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts },
  } = await getDefaultConfig()

  // here I extend the extensions needed for RN because I use JSX.
  // you don't need this if you use pure JS files
  const updatedSourceExts = [...sourceExts, "jsx", "js", "json", "ts", "tsx"]

  return {
    transformer: {
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: false,
        },
      }),
      babelTransformerPath: require.resolve("react-native-svg-transformer"),
    },
    resolver: {
      assetExts: assetExts.filter((ext) => ext !== "svg"),
      sourceExts: [...updatedSourceExts, "svg"],
    },
  }
})()

我的package-json文件的一部分：

• “反应原生”：“0.63.2”，
• "react-native-svg": "^12.1.0",
• "react-native-svg-transformer": "^0.14.3"

Answer 2

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>