时间戳

首页 > 解决方案 > 如何在 react-native 上使用 svg 图像？

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

问题描述

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

所以我跟着这个教程=>

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

当我设法显示图像时，我有一个错误无法读取未定义的“填充”属性，所以我尝试降级 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-transformer-svg 的情况下使用 react-native-svg，也就是说我必须将 SVG 文件转换为可反应的 SVG 文件。

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

标签： androidreact-nativesvg

解决方案

重要提示 - 我在真正的 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”

推荐阅读