ReactNative for Harmony 项目鸿蒙化三方库集成实战：react-native-svg

📋 前言

react-native-svg 是一个强大的 SVG 渲染库，允许在 React Native 应用中创建和管理 SVG 图形。它支持路径、形状、渐变、文本、动画等多种 SVG 元素，完全兼容 Android、iOS 和 HarmonyOS 三端。

[!WARNING] 本项目为 react-native-svg 的 ArkTS 版本，现已停止维护。如需最新版本，请使用 react-native-svg-capi。

🎯 库简介

基本信息

• 库名称: @react-native-oh-tpl/react-native-svg

• 版本信息:

  • 最新版本请查看 Releases

• 官方仓库: https://github.com/react-native-oh-library/react-native-svg

• 主要功能:

  • 支持所有 SVG 元素（路径、形状、文本、渐变等）
  • 支持动画和交互
  • 支持自定义字体
  • 兼容 Android、iOS 和 HarmonyOS

• 维护状态: ⚠️ 已停止维护，建议使用 react-native-svg-capi

为什么需要这个库？

• SVG 支持: 在 React Native 中渲染 SVG 图形和动画
• 高性能: 使用原生渲染，性能优异
• 功能丰富: 支持几乎所有 SVG 特性
• 跨平台: 在三端提供一致的渲染效果

📦 安装步骤

不懂得看另一篇文章 ：react-native-picker适配（带图片）

1. 使用 npm 安装

在项目根目录执行以下命令：

npm install @react-native-oh-tpl/react-native-svg@13.14.0-0.2.5

2. 验证安装

安装完成后，检查 package.json 文件，应该能看到新增的依赖：

{
"dependencies": {
"@react-native-oh-tpl/react-native-svg": "^13.14.0-0.2.5",
// … 其他依赖
}
}

🔧 HarmonyOS 平台配置 ⭐

由于 HarmonyOS 暂不支持 AutoLink，需要手动配置原生端代码。本文采用方法二：直接链接源码的方式。

1. 在工程根目录的 oh-package.json5 添加 overrides 字段

首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 harmony

打开 harmony/oh-package.json5，添加以下配置：

{
…
"overrides": {
"@rnoh/react-native-openharmony": "0.72.90"
}
}

2. 引入原生端代码

目前有两种方法：

方法一：通过 har 包引入

[!TIP] har 包位于三方库安装路径的 harmony 文件夹下。

打开 entry/oh-package.json5，添加以下依赖：

"dependencies": {
"@react-native-oh-tpl/react-native-svg": "file:../../node_modules/@react-native-oh-tpl/react-native-svg/harmony/svg.har"
}

点击右上角的 sync 按钮

或者在终端执行：

cd entry
ohpm install

方法二：直接链接源码

目前 DevEco Studio 不支持通过源码引入外部 module，我们推荐使用直接链接源码的方式，将源码通过操作改成 harmony 工程的内部模块。

步骤 1: 把 <RN工程>/node_modules/@react-native-oh-tpl/react-native-svg/harmony 目录下的源码 svg 复制到 harmony（鸿蒙壳工程）工程根目录下。

步骤 2: 在 harmony 工程根目录的 build-profile.template.json5（若存在）和 build-profile.json5 添加以下模块：

modules: [
…
{
name: '<xxx>',
srcPath: './<xxx>',
},
{
name: 'svg',
srcPath: './svg',
}
]

步骤 3: 打开 svg/oh-package.json5，修改 react-native-openharmony 和项目的版本一致。

步骤 4: 打开 entry/oh-package.json5，添加以下依赖：

"dependencies": {
"@rnoh/react-native-openharmony": "0.72.90",
"@react-native-oh-tpl/react-native-svg": "file:../svg"
}

步骤 5: 点击 DevEco Studio 右上角的 sync 按钮

3. 配置 CMakeLists 和引入 SVGPackage

打开 entry/src/main/cpp/CMakeLists.txt，添加：

project(rnapp)
cmake_minimum_required(VERSION 3.4.1)
set(CMAKE_SKIP_BUILD_RPATH TRUE)
set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}")
set(NODE_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../node_modules")
+ set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules")
set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp")
set(LOG_VERBOSITY_LEVEL 1)
set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments")
set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie")
set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use
add_compile_definitions(WITH_HITRACE_SYSTRACE)

add_subdirectory("${RNOH_CPP_DIR}" ./rn)

# RNOH_BEGIN: manual_package_linking_1
add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package)
+ add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/react-native-svg/src/main/cpp" ./svg)
# RNOH_END: manual_package_linking_1

file(GLOB GENERATED_CPP_FILES "./generated/*.cpp")

add_library(rnoh_app SHARED
${GENERATED_CPP_FILES}
"./PackageProvider.cpp"
"${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp"
)
target_link_libraries(rnoh_app PUBLIC rnoh)

# RNOH_BEGIN: manual_package_linking_2
target_link_libraries(rnoh_app PUBLIC rnoh_sample_package)
+ target_link_libraries(rnoh_app PUBLIC rnoh_svg)
# RNOH_END: manual_package_linking_2

打开 entry/src/main/cpp/PackageProvider.cpp，添加：

#include "RNOH/PackageProvider.h"
#include "generated/RNOHGeneratedPackage.h"
#include "SamplePackage.h"
+ #include "SVGPackage.h"

using namespace rnoh;

std::vector<std::shared_ptr<Package>> PackageProvider::getPackages(Package::Context ctx) {
return {
std::make_shared<RNOHGeneratedPackage>(ctx),
std::make_shared<SamplePackage>(ctx),
+ std::make_shared<SVGPackage>(ctx),
};
}

4.在 ArkTs 侧引入 SVG 组件

找到 function buildCustomComponent() ，一般位于 entry/src/main/ets/pages/index.ets 或 entry/src/main/ets/rn/LoadBundle.ets，添加：

…
import { createRNPackages } from '../RNPackagesFactory'
+ import { SVG_VIEW_TYPE_NAME, SVGView } from "@react-native-oh-tpl/svg"

@Builder
function buildCustomComponent(ctx: ComponentBuilderContext) {
if (ctx.componentName === SAMPLE_VIEW_TYPE) {
SampleView({
ctx: ctx.rnComponentContext,
tag: ctx.tag,
buildCustomComponent: buildCustomComponent
})
}
+ else if (ctx.componentName === SVG_VIEW_TYPE_NAME) {
+ SVGView({
+ ctx: ctx.rnComponentContext,
+ tag: ctx.tag
+ })
+ }
…
}
…

本库使用了混合方案，需要添加组件名。

在 entry/src/main/ets/pages/index.ets 或 entry/src/main/ets/rn/LoadBundle.ets 找到常量 arkTsComponentNames 在其数组里添加组件名

const arkTsComponentNames: Array<string> = [
…
+ SVG_VIEW_TYPE_NAME
];

5. 运行

点击右上角的 sync 按钮

或者在终端执行：

cd entry
ohpm install

然后编译、运行即可。

💻 代码集成

[!WARNING] 使用时 import 的库名不变。

下面是一个完整的示例，展示了 react-native-svg 的各种使用场景：

import React from 'react';
import {
View,
Text,
StyleSheet,
ScrollView,
StatusBar,
SafeAreaView,
} from 'react-native';
import { Svg, Rect, Circle, Path } from 'react-native-svg';

function SvgDemo() {
return (
<SafeAreaView style={styles.container}>
<StatusBar barStyle="light-content" />
<ScrollView>

{/* 示例 1: 基础形状 */}
<View style={styles.section}>
<Text style={styles.sectionTitle}>1. 基础形状</Text>
<View style={styles.svgContainer}>
<Svg height="200" width="350">
<Rect
x="10"
y="10"
width="80"
height="80"
fill="#4c669f"
stroke="black"
strokeWidth="2"
/>
<Circle
cx="200"
cy="50"
r="30"
fill="#f093fb"
stroke="black"
strokeWidth="2"
/>
<Path
d="M40 150 A60 30 0 1 0 160 150 A60 30 0 1 0 40 150"
fill="#43e97b"
stroke="black"
strokeWidth="2"
/>
<Path
d="M200 100 L320 180"
stroke="#ff6b6b"
strokeWidth="3"
fill="none"
/>
</Svg>
</View>
</View>

{/* 示例 2: 路径绘制 */}
<View style={styles.section}>
<Text style={styles.sectionTitle}>2. 路径绘制</Text>
<View style={styles.svgContainer}>
<Svg height="200" width="350">
{/* 星形 */}
<Path
d="M100 10 L125 75 L195 75 L140 110 L160 180 L100 145 L40 180 L60 110 L5 75 L75 75 Z"
fill="#f093fb"
stroke="black"
strokeWidth="2"
/>

{/* 心形 */}
<Path
d="M250 50 C250 20 210 20 210 50 C210 70 250 100 250 100 C250 100 290 70 290 50 C290 20 250 20 250 50 Z"
fill="#ff6b6b"
stroke="black"
strokeWidth="2"
/>

{/* 波浪线 */}
<Path
d="M20 150 Q60 100 100 150 T180 150 T260 150"
fill="none"
stroke="#43e97b"
strokeWidth="3"
/>
</Svg>
</View>
</View>

</ScrollView>
</SafeAreaView>
);
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#f5f5f5',
},
section: {
marginBottom: 20,
backgroundColor: '#ffffff',
paddingVertical: 15,
},
sectionTitle: {
fontSize: 18,
fontWeight: 'bold',
marginBottom: 10,
marginLeft: 15,
color: '#333333',
},
svgContainer: {
backgroundColor: '#f0f0f0',
justifyContent: 'center',
alignItems: 'center',
paddingVertical: 10,
},
});

export default SvgDemo;

6. 执行 npm run harmony 命令

执行 npm run harmony 命令，构建适用于鸿蒙的 bundle 文件，并拷贝到鸿蒙工程 rawfile 目录下。

🎨 实际应用场景

react-native-svg 可以应用于以下实际场景：

⚠️ 注意事项与最佳实践

1. 性能优化

• 避免使用过于复杂的路径
• 对于静态图形，考虑使用图片代替
• 在 ScrollView 中避免大量复杂的 SVG

2. 响应式设计

// ✅ 使用百分比或相对单位
<Svg width="100%" height="200" />

// ❌ 避免固定尺寸
<Svg width="350" height="200" />

3. 调试技巧

// 添加边框便于调试
<Path
d="…"
stroke="black"
strokeWidth="1"
fill="none"
/>

📝 总结

通过集成 react-native-svg，我们为项目添加了强大的 SVG 渲染能力。该库支持所有 SVG 元素、渐变、动画等功能，可以用于图标、图表、复杂图形等各种场景。

关键要点回顾

• ✅ 安装依赖: npm install @react-native-oh-tpl/react-native-svg
• ✅ 配置平台: 通过 har 包或直接链接源码，配置 CMakeLists.txt、PackageProvider.cpp 和 RNPackagesFactory.ts
• ✅ 集成代码: 使用 react-native-svg 导入组件
• ✅ 支持功能: 所有 SVG 元素、路径、形状等
• ✅ 测试验证: 确保三端表现一致
• ⚠️ 重要: 本库已停止维护，建议使用 react-native-svg-capi

实际效果

• Android: 原生渲染的 SVG 图形
• iOS: 高质量的渲染效果
• HarmonyOS: 一致的渲染表现

版本迁移提示

由于 react-native-svg（ArkTS 版本）已停止维护，建议新项目使用 react-native-svg-capi。

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net