核心内容摘要
探索无限可能：www.ti-net.com️.cn，你的数字游乐场
前言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适配带图片
使用 npm 安装在项目根目录执行以下命令npminstallreact-native-oh-tpl/react-native-svg
13.
1
0-
0.
2.
验证安装安装完成后检查package.json文件应该能看到新增的依赖{dependencies:{react-native-oh-tpl/react-native-svg:^
13.
1
0-
0.
5,// ... 其他依赖}} HarmonyOS 平台配置 ⭐由于 HarmonyOS 暂不支持 AutoLink需要手动配置原生端代码。
本文采用方法二直接链接源码的方式。
在工程根目录的 oh-package.json5 添加 overrides 字段首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程harmony打开harmony/oh-package.json5添加以下配置{ ... overrides: { rnoh/react-native-openharmony:
0.
7
90 } }
引入原生端代码目前有两种方法方法一通过 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按钮或者在终端执行cdentry ohpminstall方法二直接链接源码目前 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.
7
90, react-native-oh-tpl/react-native-svg: file:../svg }步骤 5: 点击 DevEco Studio 右上角的sync按钮
配置 CMakeLists 和引入 SVGPackage打开entry/src/main/cpp/CMakeLists.txt添加project(rnapp) cmake_minimum_required(VERSION
3.
4.
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
set(CMAKE_ASM_FLAGS -Wno-errorunused-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
# 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::vectorstd::shared_ptrPackage PackageProvider::getPackages(Package::Context ctx) { return { std::make_sharedRNOHGeneratedPackage(ctx), std::make_sharedSamplePackage(ctx), std::make_sharedSVGPackage(ctx), }; }
在 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: Arraystring [ ... SVG_VIEW_TYPE_NAME ];
运行点击右上角的sync按钮或者在终端执行cdentry ohpminstall然后编译、运行即可。
代码集成[!WARNING] 使用时 import 的库名不变。
下面是一个完整的示例展示了 react-native-svg 的各种使用场景importReactfromreact;import{View,Text,StyleSheet,ScrollView,StatusBar,SafeAreaView,}fromreact-native;import{Svg,Rect,Circle,Path}fromreact-native-svg;functionSvgDemo(){return(SafeAreaView style{styles.container}StatusBar barStylelight-content/ScrollView{/* 示例 1: 基础形状 */}View style{styles.section}Text style{styles.sectionTitle}
基础形状/TextView style{styles.svgContainer}Svg height200width350Rect x10y10width80height80fill#4c669fstrokeblackstrokeWidth2/Circle cx200cy50r30fill#f093fbstrokeblackstrokeWidth2/Path dM40 150 A60 30 0 1 0 160 150 A60 30 0 1 0 40 150fill#43e97bstrokeblackstrokeWidth2/Path dM200 100 L320 180stroke#ff6b6bstrokeWidth3fillnone//Svg/View/View{/* 示例 2: 路径绘制 */}View style{styles.section}Text style{styles.sectionTitle}
路径绘制/TextView style{styles.svgContainer}Svg height200width350{/* 星形 */}Path dM100 10 L125 75 L195 75 L140 110 L160 180 L100 145 L40 180 L60 110 L5 75 L75 75 Zfill#f093fbstrokeblackstrokeWidth2/{/* 心形 */}Path dM250 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 Zfill#ff6b6bstrokeblackstrokeWidth2/{/* 波浪线 */}Path dM20 150 Q60 100 100 150 T180 150 T260 150fillnonestroke#43e97bstrokeWidth3//Svg/View/View/ScrollView/SafeAreaView);}conststylesStyleSheet.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,},});exportdefaultSvgDemo;
执行npm run harmony命令执行npm run harmony命令构建适用于鸿蒙的 bundle 文件并拷贝到鸿蒙工程rawfile目录下。
实际应用场景react-native-svg 可以应用于以下实际场景图标渲染: 创建可缩放的矢量图标支持多种尺寸而不失真数据可视化: 绘制图表、图形、仪表盘等数据展示装饰性图形: 为应用添加美观的装饰性图形元素复杂图形: 绘制自定义的复杂图形和图案⚠️
注意事项与最佳实践
性能优化避免使用过于复杂的路径对于静态图形考虑使用图片代替在 ScrollView 中避免大量复杂的 SVG
响应式设计// ✅ 使用百分比或相对单位Svg width100%height200/// ❌ 避免固定尺寸Svg width350height200/
调试技巧// 添加边框便于调试Path d...strokeblackstrokeWidth1fillnone/
总结通过集成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-svgArkTS 版本已停止维护建议新项目使用 react-native-svg-capi。
欢迎加入开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net