如何使用 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

之后，您應該根據文檔（對於 React Native v0.57 或更高版本/Expo SDK v31.0.0 或更高版本）：

1.將項目的metro.config.js文件中的內容與此配置合並（如果該文件尚不存在，則創建該文件）。

地鐵.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 ：

應用程序.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>
    );
}

Answer 2

您可以使用https://svgr.now.sh/將 svg 文件轉換為 JSX（檢查 react-native 組合）

import Svg, {
  G,
  Path,
  Use,
  Defs,
  LinearGradient,
  Stop,
  Mask,
} from 'react-native-svg';

/* Use this if you are using Expo
import * as Svg from 'react-native-svg';
const { Circle, Rect } = Svg;
*/

import React from 'react';
import {View, StyleSheet} from 'react-native';

export default class SvgExample extends React.Component {
  render() {
    return (
      <View
        style={[
          StyleSheet.absoluteFill,
          {alignItems: 'center', justifyContent: 'center'},
        ]}>
        <Svg
          xmlns="http://www.w3.org/2000/svg"
          xlink="http://www.w3.org/1999/xlink"
          width={100}
          height={100}
          viewBox="0 0 100 100">
          <Defs>
            <LinearGradient
              id="background-gradient"
              x1="0"
              y1="0"
              y2="1"
              x2="0">
              <Stop stopColor="#fff" offset="0%" />
              <Stop stopColor="#000" offset="100%" />
            </LinearGradient>

            <LinearGradient id="picture-gradient" x1="0" y1="0" y2="1" x2="0">
              <Stop stopColor={this.props.color} offset="0%" />
              <Stop stopColor={this.props.color} offset="100%" />
            </LinearGradient>
          </Defs>

          <G transform="translate(50 50) translate(0 0)  scale(0.5)  translate(-50 -50)">
            <G fill="url(#picture-gradient)">
              <G transform="scale(2.0833333333333335) translate(0 -0.10000300407409668)">
                <Path d="M14.1 14.5c.1-.3.2-.5.6-.4-.1-.2-.3-.5-.4-.7-.1-.2-.2-.4-.1-.6.2-.9-.1-1.6-.4-2.4-.1-.3-.4-.8-1-.7-.4-.5-.6.1-1 .2-.5.1-1 .2-1.6.3-.1 0-.2-.1-.2-.2.5-.1 1-.3 1.5-.4l-.2-.2c.2-.3.3-.5.4-.7.2-.2.4-.4.6-.3.4 0 .5-.1.5-.5 0 0 0-.1.1-.2.4.3.7.1.9-.3.1-.2 1.1-.3 1.3-.1.3.2.6.5.8.8.1.2.3.2.5.2.8-.2 1.5.2 2 .7.2.2.5.2.7.3.5-.6 1.2.2 1.7-.2l-.1-.1c-.1-.1-.3-.3-.3-.4 0-.7.1-.8.8-.6.3.1.6 0 .7.4.1.2.4.3.6.5.1.1.2.2.2.3 0 .1-.1.3-.2.4-.6.2-.9.8-1.3 1.2-.4.5-.2 1.1.4 1.3.4.1.8.2 1.3.3.4.1.6.2.7.6.1.5.4.7.8.5 0-.1-.1-.3-.1-.4-.1-.3-.3-.5 0-.8.2-.2.1-.4-.1-.6 0-.2-.2-.5-.2-.7-.1-.5.1-.7.6-.6.4 0 .8.1 1 .4.1.1.3.3.4.3.1 0 .2-.3.3-.5l.9.6c.4.2.7.5 1.1.7.3.2.7.3.7.7 0 .4-.3.7-.8.7-.7.1-1.1.5-1.3 1.2l.5-.5c.4-.4.6-.4.8.1.2.4.4.6.9.5v.1c-.2.2-.4.5-.6.8-.1-.2-.2-.3-.2-.5-.3.3-.7.4-.8.8H43C39.8 8.5 32.5 3.3 24 3.3S8.2 8.4 5 15.8h8.5c.2-.4.4-.9.6-1.3zm13.7-4.7c.1.1-.1.3-.1.6-.6-.2-1.2-.3-1.9-.5.2-.2.4-.4.6-.7-.3 0-.5 0-.8-.1-.3-.7-1-.2-1.6-.4-.1 0-.3-.2-.4-.3 0-.1.1-.4.2-.4.2-.1.5-.1.7-.1.4.1.9.2 1.3.4.6.2 1.1.4 1.7.7.1.1.2.3.3.5h-.6c.3 0 .5.1.6.3zm-2.7-4.3c.2 0 .3-.1.4-.1.9.2 1.8.2 2.7.7.3.2.6.4.9.5.3.1.5.2.8.3.4.2.4.4.2.8.2.1.3.3.4.4-.2.4-.1.7.2 1 .2.2.3.4.5.6-.6.3-1.1 0-1.5-.2l-.9-.6c-.2-.2-.4-.5-.6-.8 0 .1-.1 0-.2-.1-.4-.2-.8-.5-1.3-.7-.3-.1-.7-.2-1.1-.2-.5 0-.7-.2-.8-.7 0-.1-.1-.3-.1-.5.2 0 .3-.1.5-.1 0 0-.1-.1-.1-.3zm-.8.4c.3-.1.5.1.4.4-.1.8-.3 1-1.1.9.1-.3.1-.5.2-.7-.2-.1-.3-.1-.4-.2v-.1c.2-.2.5-.3.9-.3zm12.9 28c-.2.4-.4.8-.5 1.2-.3.8-1.2 1.2-1.8 1.7-.1.1-.3.2-.4.4-.6 1.1-1.6 1.8-2.4 2.6-.1.1-.3.1-.4.2-.2.2-.4.3-.7.5-.1.1-.1.2-.2.2-.6.3-1.3.6-1.9 1l-1.2.9c-.2.1-.4.3-.6.5-.2.2-.5.2-.6.6 0 .1-.3.2-.4.2-.2 0-.5 0-.8-.1.3-.4.5-.7.8-1 .2-.2.4-.4.5-.7 0-.3.3-.5.5-.7 1-1.2 1.7-2.6 1.9-4.2 0-.3 0-.4-.2-.5h-.1c-.9-.3-1.6-.9-1.9-1.9-.1-.4-.5-.7-.8-1-.4-.4-.4-.7-.1-1.1.1-.1.1-.2.1-.3H5c3.2 7.3 10.5 12.5 19 12.5s15.8-5.1 19-12.5h-5c-.2.3-.5.9-.8 1.5zm9.1-16.8H1.7c-1 0-1.7.8-1.7 1.7v10.3c0 .9.8 1.7 1.7 1.7h44.6c1 0 1.7-.8 1.7-1.7V18.8c0-.9-.8-1.7-1.7-1.7zm-27.7 4.4l-1.2 5c-.1.3-.2.6-.2.7-.1.2-.2.3-.3.4-.1.1-.3.2-.6.2-.2 0-.4-.1-.5-.2-.1-.1-.2-.2-.3-.4-.1-.1-.1-.4-.2-.7l-1.2-4.4-1.2 4.4c-.1.3-.2.6-.2.7-.1.1-.2.3-.3.4-.1.1-.3.2-.5.2s-.3 0-.5-.1l-.3-.3c-.1-.1-.1-.3-.2-.4 0-.2-.1-.3-.1-.5l-1.2-5c-.1-.3-.1-.5-.1-.7 0-.2.1-.4.2-.5.1-.1.3-.2.5-.2.3 0 .5.1.6.3.1.2.2.4.2.8l1 4.3 1.1-4c.1-.3.2-.5.2-.7.1-.2.2-.3.3-.4.1-.1.3-.2.6-.2s.4.1.6.2c.1.1.2.3.3.4.1.1.1.4.2.7l1.1 4 1-4.3c0-.2.1-.4.1-.5 0-.1.1-.2.2-.3.1-.1.3-.2.4-.2.2 0 .4.1.5.2.1.1.2.3.2.5-.1.1-.1.3-.2.6zm10 0l-1.2 5c-.1.3-.2.6-.2.7-.1.2-.2.3-.3.4s-.3.2-.6.2c-.2 0-.4-.1-.5-.2-.1-.1-.2-.2-.3-.4-.1-.1-.1-.4-.2-.7L24 22.1l-1.2 4.4c-.1.3-.2.6-.2.7-.1.1-.2.3-.3.4-.1.1-.3.2-.5.2s-.3 0-.5-.1l-.3-.3c-.1-.1-.1-.3-.2-.4 0-.2-.1-.3-.1-.5l-1.2-5c-.1-.3-.1-.5-.1-.7 0-.2.1-.4.2-.5.1-.1.3-.2.5-.2.3 0 .5.1.6.3.1.2.2.4.2.8l1 4.3 1.1-4c.1-.3.2-.5.2-.7.1-.2.2-.3.3-.4.1-.1.3-.2.6-.2s.4.1.6.2c.1.1.2.3.3.4.1.1.1.4.2.7l1.1 4 1-4.3c0-.2.1-.4.1-.5 0-.1.1-.2.2-.3.1-.1.3-.2.4-.2.2 0 .4.1.5.2.1.1.2.3.2.5 0 .1-.1.3-.1.6zm9.9 0l-1.2 5c-.1.3-.2.6-.2.7-.1.2-.2.3-.3.4-.1.1-.3.2-.6.2-.2 0-.4-.1-.5-.2-.1-.1-.2-.2-.3-.4s-.1-.4-.2-.7L34 22.1l-1.2 4.4c-.1.3-.2.6-.2.7-.1.1-.2.3-.3.4-.1.1-.3.2-.6.2-.2 0-.3 0-.5-.1l-.3-.3c-.1-.1-.1-.3-.2-.4 0-.2-.1-.3-.1-.5l-1.2-5c-.1-.3-.1-.5-.1-.7 0-.2.1-.4.2-.5.1-.1.3-.2.5-.2.3 0 .5.1.6.3.1.2.2.4.2.8l1 4.3 1.1-4c.1-.3.2-.5.2-.7.1-.2.2-.3.3-.4.1-.1.3-.2.6-.2s.4.1.6.2c.1.1.2.3.3.4.1.1.1.4.2.7l1.1 4 1-4.3c0-.2.1-.4.1-.5 0-.1.1-.2.2-.3.1-.1.3-.2.4-.2.2 0 .4.1.5.2.1.1.2.3.2.5 0 .1 0 .3-.1.6z" />
              </G>
            </G>
          </G>
        </Svg>
      </View>
    );
  }
}

在其他文件中

import Website from '../../components/svg/Website';
...
render() {
  return (
    <View>
      <Website
              width={windowWidth / 8}
              height={windowWidth / 8}
              color={this.props.brand.headerColor}
            />
    </View>
  )
}