React Native SVG 使用指南：从基础到高级应用

原创于 2025-06-05 09:15:28 发布 · 312 阅读

CC 4.0 BY-SA版权

React Native SVG 使用指南：从基础到高级应用

前言

在现代移动应用开发中，矢量图形(SVG)因其可缩放性和轻量级特性而广受欢迎。React Native SVG 是一个强大的库，它允许开发者在 React Native 应用中渲染 SVG 图形。本文将全面介绍如何使用这个库，从基础用法到高级配置。

基础使用

基本组件导入

首先，我们需要导入 SVG 相关的组件：

import Svg, {
  Circle,
  Rect,
  Path,
  // 其他SVG元素...
} from 'react-native-svg';

简单示例

下面是一个绘制圆形和矩形的简单示例：

import React from 'react';
import { View, StyleSheet } from 'react-native';
import Svg, { Circle, Rect } from 'react-native-svg';

export default class SvgExample extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Svg height="50%" width="50%" viewBox="0 0 100 100">
          <Circle cx="50" cy="50" r="45" stroke="blue" strokeWidth="2.5" fill="green" />
          <Rect x="15" y="15" width="70" height="70" stroke="red" strokeWidth="2" fill="yellow" />
        </Svg>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

在这个例子中，我们创建了一个包含圆形和矩形的SVG图形。viewBox属性定义了SVG的可见区域和坐标系。

加载远程SVG文件

React Native SVG 提供了直接从URL加载SVG文件的功能：

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

export default () => (
  <SvgUri
    width="100%"
    height="100%"
    uri="http://example.com/path/to/your.svg"
  />
);

处理CSS样式

如果远程SVG包含CSS样式，需要使用SvgCssUri组件：

import { SvgCssUri } from 'react-native-svg/css';

export default () => (
  <SvgCssUri
    width="100"
    height="100"
    uri="https://example.com/styled-svg.svg"
  />
);

错误处理

加载远程资源时，良好的错误处理机制很重要：

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

export default () => {
  const [uri, setUri] = React.useState('https://example.com/maybe-not-exist.svg');
  
  return (
    <SvgUri
      width="100%"
      height="100%"
      uri={uri}
      onError={() => setUri('https://example.com/fallback.svg')}
      fallback={<Text>加载失败，显示备用内容</Text>}
    />
  );
};

本地SVG文件处理

使用SVG转换器

为了更方便地使用本地SVG文件，推荐使用SVG转换器：

安装必要的依赖：

npm install react-native-svg-transformer --save-dev

配置metro.config.js：

const { getDefaultConfig } = require('metro-config');

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'],
    },
  };
})();

使用方式：

import Logo from './logo.svg';

// 在组件中使用
<Logo width={120} height={40} />

替代方案：运行时转换

如果不使用转换器，也可以在运行时转换SVG：

import { SvgXml } from 'react-native-svg';
import svgContent from './icon.svg';

export default () => <SvgXml xml={svgContent} width="200" height="200" />;

直接使用SVG字符串

可以直接将SVG内容作为字符串使用：

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

const svgString = `
  <svg width="32" height="32" viewBox="0 0 32 32">
    <path fill="#FEA267" d="M4 0H28V32H4V0Z"/>
  </svg>
`;

export default () => <SvgXml xml={svgString} width="100%" height="100%" />;

带CSS样式的SVG字符串

如果SVG字符串包含CSS样式，使用SvgCss组件：

import { SvgCss } from 'react-native-svg/css';

const styledSvg = `
  <svg width="32" height="32">
    <style>.red { fill: #ff0000; }</style>
    <rect class="red" width="32" height="32"/>
  </svg>
`;

export default () => <SvgCss xml={styledSvg} width="100%" height="100%" />;

常用SVG元素详解

Svg 容器

Svg是所有SVG元素的容器，可以设置全局属性：

<Svg 
  height="100" 
  width="100"
  fill="blue"  // 子元素默认填充色
  stroke="red" // 子元素默认描边色
>
  {/* 子元素 */}
</Svg>

基本形状

矩形 (Rect):

<Rect x="10" y="10" width="80" height="80" fill="green" />

圆形 (Circle):

<Circle cx="50" cy="50" r="40" fill="yellow" />

椭圆 (Ellipse):

<Ellipse cx="50" cy="50" rx="40" ry="30" fill="purple" />

直线 (Line):

<Line x1="10" y1="10" x2="90" y2="90" stroke="black" />

多边形 (Polygon):

<Polygon points="50,0 100,100 0,100" fill="orange" />

折线 (Polyline):

<Polyline points="10,10 20,40 30,20" fill="none" stroke="blue" />

路径 (Path):

<Path d="M10 10 L90 10 L90 90 Z" fill="none" stroke="red" />

常见属性说明

| 属性 | 默认值 | 说明 | |-----------------|----------|----------------------------------------------------------------------| | fill | '#000' | 填充颜色 | | fillOpacity | 1 | 填充透明度 | | stroke | 'none' | 描边颜色 | | strokeWidth | 1 | 描边宽度 | | strokeOpacity | 1 | 描边透明度 | | strokeLinecap | 'square' | 线帽样式 (butt/square/round) | | strokeLinejoin | 'miter' | 转角样式 (miter/bevel/round) | | strokeDasharray | [] | 虚线模式 | | x / y | 0 | 位置偏移 | | rotation | 0 | 旋转角度 | | scale | 1 | 缩放比例 | | origin | 0, 0 | 变换原点 |

高级技巧

继承属性

在Svg容器上设置的属性会被子元素继承：

<Svg fill="blue" stroke="red">
  <Rect x="10" y="10" width="80" height="80" /> 
  {/* 这个矩形会继承fill和stroke属性 */}
</Svg>

使用currentColor

currentColor可以引用父元素定义的color属性：

<Svg color="green">
  <Path stroke="currentColor" /> {/* 描边将为绿色 */}
</Svg>

渐变效果

可以使用线性渐变和径向渐变：

<Svg>
  <Defs>
    <LinearGradient id="grad" x1="0" y1="0" x2="1" y2="1">
      <Stop offset="0" stopColor="red" />
      <Stop offset="1" stopColor="blue" />
    </LinearGradient>
  </Defs>
  <Rect x="10" y="10" width="80" height="80" fill="url(#grad)" />
</Svg>

Web平台配置

Metro打包器

使用Metro打包器时无需额外配置。

Webpack配置

使用Webpack时需要额外配置：

安装依赖：

npm install @react-native/assets-registry/registry

修改webpack配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        include: [
          path.resolve(__dirname, 'node_modules/@react-native/assets-registry/registry'),
        ],
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['module:metro-react-native-babel-preset'],
          },
        },
      },
    ],
  },
};