android - 如何使用 react-native-svg 库加载本地 svg 文件

Question

我正在尝试使用 react-native-svg 库在 react-native 中加载本地 SVG 文件，我已经安装了它，但我不知道如何使用本地 svg 文件来执行此操作。该文件位于“./assets/bg.svg”中，我正在使用 expo。如果你知道，请写出确切的代码。

Answer 1

加载 react-native-svg对于本地镜像，您还应该安装 react-native-svg-transformer最重要的是，您可以在项目中执行以下操作:
npm install react-native-svg-transformer
之后你应该按照 docs (对于 React Native v0.57 或更新版本/Expo SDK v31.0.0 或更新版本):

1. 合并项目的 metro.config.js 中的内容具有此配置的文件(如果该文件尚不存在，则创建该文件)。

Metro.config.js:

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts }
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve("react-native-svg-transformer")
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== "svg"),
      sourceExts: [...sourceExts, "svg"]
    }
  };
})();

2. 如果您使用 Expo，您还需要将其添加到 app.json :

app.json:

  "expo": {
    "packagerOpts": {
      "config": "metro.config.js",
      "sourceExts": [
        "expo.ts",
        "expo.tsx",
        "expo.js",
        "expo.jsx",
        "ts",
        "tsx",
        "js",
        "jsx",
        "json",
        "wasm",
        "svg"
      ]
    }
  }
}

3. 最后，一个最小的应用程序看起来像这样:

应用.js:

import React from 'react';
import {View} from 'react-native';
import Bg from "./assets/bg.svg";

export default function App() {
    return (
        <View>
            <Bg width={"100%"} height={"100%"} />
        </View>
    );
}