【鸿蒙优选三方库】@react-native-ohos/react-native-svg：SVG 矢量图形渲染组件

RN 鸿蒙应用里要用矢量图标、SVG 动画、自定义图表？@react-native-ohos/react-native-svg 基于 software-mansion 原库适配，Path/Circle/Rect/G/Text/LinearGradient 全套 SVG 元素开箱即用。

包名：@react-native-ohos/react-native-svg
当前版本：v15.0.1（基于原库 v15.0.0）
协议：MIT
安装：npm install @react-native-ohos/react-native-svg
仓库：https://gitcode.com/CPF-RN/rntpc_react-native-svg

一、它解决了什么问题？

RN 原生没有 SVG 渲染能力。要做矢量图标、SVG 动画、自定义图表（不依赖三方图表库），传统方案只能：

用 PNG 图标 → 多分辨率适配麻烦，放大模糊
用字体图标（IconFont）→ 颜色/大小限制多
用 Canvas → API 复杂，RN 生态支持差

react-native-svg 在原生层实现了 SVG 渲染引擎------Path/Circle/Rect/Line/Polygon/G/Text/Use/Defs/LinearGradient/RadialGradient/ClipPath/Mask 全套 SVG 元素，让 RN 鸿蒙应用拥有标准 SVG 渲染能力。

二、核心特点

特性	说明
全套 SVG 元素	Path/Circle/Rect/Ellipse/Line/Polyline/Polygon/G/Text/Use
渐变	LinearGradient / RadialGradient
裁剪/遮罩	ClipPath / Mask
交互	支持 `onPress` 等触摸事件
动画联动	与 react-native-reanimated 集成，SVG 属性可动画
标准属性	fill / stroke / strokeWidth / opacity / transform 全支持
矢量不失真	任意缩放不模糊，适配所有屏幕密度

三、适用场景

矢量图标：替代 PNG/IconFont，一套 SVG 适配所有分辨率。
自定义图表：手绘折线图/柱状图/饼图，不依赖 mpchart。
SVG 动画：路径变形动画、渐变动画、描边动画。
地图/路径绘制：轨迹回放、导航路径。
动态图形：根据数据实时生成图形（如进度环、仪表盘）。
品牌 Logo：矢量 Logo 适配所有屏幕。

四、快速上手

1. 安装

bash 复制代码

npm install @react-native-ohos/react-native-svg

2. 基础图形

tsx 复制代码

import Svg, { Circle, Rect, Line, Text } from 'react-native-svg'

<Svg width={200} height={200}>
  <Rect x={10} y={10} width={180} height={180} fill="#F8F9FA" rx={12} />
  <Circle cx={100} cy={100} r={60} fill="#4ECDC4" />
  <Line x1={40} y1={100} x2={160} y2={100} stroke="#FF6B6B" strokeWidth={3} />
  <Text x={100} y={105} textAnchor="middle" fill="#fff" fontSize={20}>SVG</Text>
</Svg>

3. 渐变填充

tsx 复制代码

import Svg, { Defs, LinearGradient, Stop, Rect } from 'react-native-svg'

<Svg width={200} height={100}>
  <Defs>
    <LinearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
      <Stop offset="0%" stopColor="#4ECDC4" />
      <Stop offset="100%" stopColor="#45B7D1" />
    </LinearGradient>
  </Defs>
  <Rect x={0} y={0} width={200} height={100} fill="url(#grad)" rx={8} />
</Svg>

4. SVG 路径（矢量图标）

tsx 复制代码

import Svg, { Path } from 'react-native-svg'

// 心形图标，任意缩放不模糊
<Svg width={48} height={48} viewBox="0 0 24 24">
  <Path
    d="M12 21s-7-4.5-9.5-9C1 9 2.5 5 6 5c2 0 3 1 4 2 1-1 2-2 4-2 3.5 0 5 4 3.5 7-2.5 4.5-9.5 9-9.5 9z"
    fill="#FF6B6B"
  />
</Svg>

5. 可交互图形

tsx 复制代码

<Svg width={200} height={200}>
  <Circle
    cx={100} cy={100} r={50}
    fill="#4ECDC4"
    onPress={() => console.log('点击了圆')}
  />
</Svg>

五、亮点能力速览

Path 描边动画 ：用 Reanimated 的 useAnimatedProps 驱动 strokeDashoffset，实现"画线"动画
渐变支持 ：LinearGradient / RadialGradient 让图形更精致
ClipPath 裁剪：按任意路径裁剪内容
矢量不模糊：基于原生渲染，任意 DPI 屏幕都清晰
与手势联动 ：SVG 元素支持 onPress，可做可交互图形

六、版本演进

版本	基线	说明
15.0.1	v15.0.0	最新版，基于 software-mansion v15

七、为什么值得选它？

SVG 标准：前端 SVG 代码直接复用，Path/Circle/G/Text 语法一致。
矢量不失真：一套图标适配所有屏幕密度，告别多分辨率 PNG。
原生渲染：不是 JS Canvas 模拟，原生层渲染性能好。
可交互：SVG 元素支持触摸事件，可做按钮/热区。
动画友好：与 Reanimated 集成，SVG 属性可驱动动画。

如果你在 RN 鸿蒙应用里需要矢量图标、自定义图形、SVG 动画------@react-native-ohos/react-native-svg 是唯一的选择。