logo标签列表

如何使用React Native SVG库加载本地SVG文件

androidiosreact-nativesvgexpo
5

我正在尝试使用react-native-svg库在React Native中加载本地SVG文件，已经安装了该库，但我不知道如何处理本地SVG文件。该文件位于"./assets/bg.svg"，我正在使用expo。如果您知道，请提供确切代码。

2个回答
6
为了使用本地图片加载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文件的内容与此配置合并（如果文件不存在，请创建该文件）。 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. 最后，一个最简化的应用程序应该是这样的:

App.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>
    );
}
-1

你可以使用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>
  )
}
2
这不是我问题的答案，兄弟。 - Habib Mhamadi
@Habib Mhamadi，我更新了我的回答。你可以很容易地将SVG文件转换为JSX，并使用react-native-svg来显示它。 - Shing Ho Tan
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接