React Native 使用SVG

# 渲染形状

# 安装

# 例子

import Svg, { Circle } from 'react-native-svg';

<Svg height="50%" width="50%" viewBox="0 0 100 100" >
    <Circle cx="50" cy="50" r="50" stroke="purple" strokeWidth=".5" fill="violet" />
</Svg>

1
2
3
4
5

# 渲染在线图像和图标

使用SvgUri

import { SvgUri } from 'react-native-svg';

<SvgUri
    width="100%"
    height="100%"
    uri="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/debian.svg"
/>

1
2
3
4
5
6
7

# 渲染本地图标或图片

# 安装

react-native-svg-transformer (opens new window)

# 配置项目

前往你的项目的metro.config.js 文件。如果这个文件在你的项目中不存在，你就需要创建它。

For React Native v0.72.1 or newer

const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");

const defaultConfig = getDefaultConfig(__dirname);
const { assetExts, sourceExts } = defaultConfig.resolver;

/**
 * Metro configuration
 * https://reactnative.dev/docs/metro
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
  transformer: {
    babelTransformerPath: require.resolve(
      "react-native-svg-transformer/react-native"
    )
  },
  resolver: {
    assetExts: assetExts.filter((ext) => ext !== "svg"),
    sourceExts: [...sourceExts, "svg"]
  }
};

module.exports = mergeConfig(defaultConfig, config);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

若使用了TypeScript

前往你的项目的declarations.d.ts 文件。如果这个文件在你的项目中不存在，你就需要创建它。

declare module "*.svg" {
  import React from "react";
  import { SvgProps } from "react-native-svg";
  const content: React.FC<SvgProps>;
  export default content;
}

1
2
3
4
5
6

# 例子

import CollectSvg from "../../assets/collect.svg";

<CollectSvg width={rWidth(52.33)} height={rHeight(55)} />

1
2
3

上次更新: 2024/08/14, 04:14:33

← React Native 响应式布局 React Native搭建环境→