React Native SVG 使用教程

2026-01-16 10:10:47作者：胡唯隽

**探索无限创意空间 —— React-Native-SVG**：为你的React Native应用解锁全平台SVG魔法！无论是iOS、Android、macOS、Windows还是网页，此库让你轻松驾驭SVG元素与属性，从矩形到复杂路径，一网打尽。无需繁琐转换，直接将SVG设计活现于应用之中。简单安装，兼容广泛React Native版本，支持最新渲染系统Fabric（需0.69.0+）。遇到挑战？我们有详尽文档和贴心社区助你排忧解难。加入数千开发者行列，用React-Native-SVG释放图形设计的力量，打造视觉盛宴，无论是动态图标还是精致插图，一切尽在掌握。由软件巨匠Software Mansion维护，专业团队背后的支持，让你的创作之旅更加顺风顺水。开始你的图形革命吧！

项目地址：https://gitcode.com/gh_mirrors/rea/react-native-svg

项目介绍

React Native SVG 是一个用于 React Native 和 React Web 项目的 SVG 库。它允许你在移动应用和网页中渲染 SVG 图形，提供了丰富的 SVG 元素和功能，如 <Circle>, <Rect>, <Path> 等。这个库由 Software Mansion 维护，是一个广泛使用的开源项目。

项目快速启动

安装

首先，你需要安装 react-native-svg 库：

npm install react-native-svg

基本使用

以下是一个简单的示例，展示如何在 React Native 项目中使用 SVG：

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

const App = () => (
  <Svg width="100" height="100">
    <Circle cx="50" cy="50" r="40" stroke="black" strokeWidth="2" fill="red" />
  </Svg>
);

export default App;

应用案例和最佳实践

加载远程 SVG 文件

你可以使用 <SvgUri> 组件加载远程 SVG 文件：

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

const App = () => (
  <SvgUri
    width="100%"
    height="100%"
    uri="http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg"
  />
);

export default App;

处理触摸事件

你可以为 SVG 元素添加触摸事件：

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

const App = () => (
  <Svg width="100" height="100">
    <Circle
      cx="50"
      cy="50"
      r="40"
      fill="red"
      onPress={() => alert('Press on Circle')}
    />
  </Svg>
);

export default App;

典型生态项目

React Native Web

React Native SVG 也支持 React Native Web，这意味着你可以在网页项目中使用相同的 SVG 组件。这对于跨平台开发非常有用。

其他相关库

react-native-svg-transformer: 允许你在 React Native 项目中使用 SVG 文件作为组件。
react-native-svg-charts: 提供了一系列基于 SVG 的图表组件，如折线图、柱状图等。

通过这些库，你可以扩展 React Native SVG 的功能，实现更复杂的图形和图表。

react-native-svg