{"id":28421071,"url":"https://github.com/yrjwcharm/react-native-svga-player","last_synced_at":"2025-07-21T07:02:34.224Z","repository":{"id":296517153,"uuid":"993656818","full_name":"yrjwcharm/react-native-ohos-svgaplayer","owner":"yrjwcharm","description":"这是一款使用ReactNative 加载HarmonyOS Svga动画的播放器插件","archived":false,"fork":false,"pushed_at":"2025-06-24T05:59:32.000Z","size":3912,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-12T03:50:25.821Z","etag":null,"topics":["harmony","react-native","svga"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-ohos-svgaplayer","language":"C++","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yrjwcharm.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-31T08:23:45.000Z","updated_at":"2025-06-24T05:59:35.000Z","dependencies_parsed_at":"2025-06-23T02:32:32.401Z","dependency_job_id":"4c15c41a-b155-4540-abd7-e8742719f01d","html_url":"https://github.com/yrjwcharm/react-native-ohos-svgaplayer","commit_stats":null,"previous_names":["yrjwcharm/react-native-svga-player","yrjwcharm/react-native-ohos-svgaplayer"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/yrjwcharm/react-native-ohos-svgaplayer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yrjwcharm%2Freact-native-ohos-svgaplayer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yrjwcharm%2Freact-native-ohos-svgaplayer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yrjwcharm%2Freact-native-ohos-svgaplayer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yrjwcharm%2Freact-native-ohos-svgaplayer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yrjwcharm","download_url":"https://codeload.github.com/yrjwcharm/react-native-ohos-svgaplayer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yrjwcharm%2Freact-native-ohos-svgaplayer/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266255244,"owners_count":23900098,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["harmony","react-native","svga"],"created_at":"2025-06-05T04:15:58.687Z","updated_at":"2025-07-21T07:02:34.192Z","avatar_url":"https://github.com/yrjwcharm.png","language":"C++","funding_links":[],"categories":[],"sub_categories":[],"readme":"## ***这是一款使用ReactNative 加载`HarmonyOS` Svga动画的播放器插件*** [三端Svga动画统一使用点击这里](https://github.com/yrjwcharm/react-native-ohos/tree/feature/rnoh/svgaplayer)\n\u003e ### 版本：latest\n\n\u003cp align=\"center\"\u003e\n  \u003ch1 align=\"center\"\u003e \u003ccode\u003ereact-native-ohos-svgaplayer\u003c/code\u003e \u003c/h1\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://github.com/wonday/react-native-pdf/blob/master/LICENSE\"\u003e\n        \u003cimg src=\"https://img.shields.io/badge/license-MIT-green.svg\" alt=\"License\" /\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n\u003e [!TIP] [Github 地址](https://github.com/yrjwcharm/react-native-ohos-svgaplayer)\n\n## 安装与使用\n\n#### **npm**\n\n```bash\nnpm install react-native-ohos-svgaplayer  \n```\n\n#### **yarn**\n\n```bash\nyarn add react-native-ohos-svgaplayer\n```\n\n\u003c!-- tabs:end --\u003e\n\n下面的代码展示了这个库的基本使用场景：\n\n\u003e [!WARNING] 使用时 import 的库名不变。alias: react-native-svga-player 主要是统一 android/ios import导入\n\n```js\nimport React from \"react\";\nimport { View, Dimensions, StyleSheet } from \"react-native\";\nimport RNSvgaPlayer from 'react-native-svga-player'\n\nexport function App() {\n  return (\n   \u003cRNSvgaPlayer\n    source=\"https://raw.githubusercontent.com/yyued/SVGAPlayer-iOS/master/SVGAPlayer/Samples/Goddess.svga\"\n        style={{\n          width: 300,\n          height: 150,\n        }}\n      /\u003e\n  );\n}\n\nconst styles = StyleSheet.create({\n   container: {\n    flex: 1,\n    justifyContent: \"flex-start\",\n    alignItems: \"center\",\n  },\n});\n```\n更多详情用法参考  [三端Svga动画统一使用点击这里](https://github.com/yrjwcharm/react-native-ohos/tree/feature/rnoh/svgaplayer)\n\n## Link\n\n目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。\n\n首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony`\n\n ###  1.在工程根目录的 `oh-package.json5` 添加 overrides 字段 \n\n  ```json\n  {\n    ...\n    \"overrides\": {\n      \"@rnoh/react-native-openharmony\": \"file:../libs/react_native_openharmony_release.har\"\n    \n    }\n  }\n  ```\n### 2.引入原生端代码 ，目前有两种方法：\n\n    * 1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）；\n    * 2. 直接链接源码。\n\n  方法一：通过 har 包引入（推荐）\n\n  \u003e [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。\n\n  打开 `entry/oh-package.json5`，添加以下依赖\n\n  ```json\n  \"dependencies\": {\n      \"@rnoh/react-native-openharmony\": \"file:../libs/react_native_openharmony_release.har\"\n      \"@react-native-ohos/react-native-svga-player\": \"file:../../node_modules/react-native-ohos-svgaplayer/harmony/svgaplayer.har\",\n    },\n  ```\n\n  点击右上角的 `sync` 按钮\n\n  或者在终端执行：\n\n  ```bash\n  cd entry\n  ohpm install\n\n  ```\n\n  方法二：直接链接源码\n\n  \u003e [!TIP] 从react-native-ohos-svga-player获取到svgaplayer源码文件，直接在harmony工程中通过File-\u003eNew-\u003eImport-\u003eImport Module导入即可 主工程`entry/oh-package.json5`中添加\n\n  ```json\n  \"dependencies\": {\n      \"@rnoh/react-native-openharmony\": \"file:../libs/react_native_openharmony_release.har\"\n      \"@react-native-ohos/react-native-svga-player\": \"file:../svgaplayer\",\n\n    }\n  ```\n### 3.配置 CMakeLists 和引入 SvgaPlayerPackage\n\n打开 `entry/src/main/cpp/CMakeLists.txt`，添加：\n\n```diff\nproject(rnapp)\ncmake_minimum_required(VERSION 3.4.1)\nset(CMAKE_SKIP_BUILD_RPATH TRUE)\nset(RNOH_APP_DIR \"${CMAKE_CURRENT_SOURCE_DIR}\")\nset(NODE_MODULES \"${CMAKE_CURRENT_SOURCE_DIR}/../../../../../node_modules\")\nset(OH_MODULES \"${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules\")\n+set(OH_MODULE_DIR \"${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules\")\nset(RNOH_CPP_DIR \"${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp\")\nset(LOG_VERBOSITY_LEVEL 1)\nset(CMAKE_ASM_FLAGS \"-Wno-error=unused-command-line-argument -Qunused-arguments\")\nset(CMAKE_CXX_FLAGS \"-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie\")\nset(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use\nadd_compile_definitions(WITH_HITRACE_SYSTRACE)\n\nadd_subdirectory(\"${RNOH_CPP_DIR}\" ./rn)\n\n# RNOH_BEGIN: manual_package_linking_1\nadd_subdirectory(\"../../../../sample_package/src/main/cpp\" ./sample-package)\n+ add_subdirectory(\"${OH_MODULE_DIR}/@react-native-ohos/react-native-svga-player/src/main/cpp\" ./svgaplayer)\n\n# RNOH_END: manual_package_linking_1\n\nfile(GLOB GENERATED_CPP_FILES \"./generated/*.cpp\")\n\nadd_library(rnoh_app SHARED\n    ${GENERATED_CPP_FILES}\n    \"./PackageProvider.cpp\"\n    \"${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp\"\n)\ntarget_link_libraries(rnoh_app PUBLIC rnoh)\n\n# RNOH_BEGIN: manual_package_linking_2\ntarget_link_libraries(rnoh_app PUBLIC rnoh_sample_package)\n\n+ target_link_libraries(rnoh_app PUBLIC rnoh_svgaplayer)\n\n# RNOH_END: manual_package_linking_2\n```\n\n打开 `entry/src/main/cpp/PackageProvider.cpp`，添加：\n\n```diff\n#include \"RNOH/PackageProvider.h\"\n#include \"SamplePackage.h\"\n+ #include \"SvgaPlayerPackage.h\"\n\nusing namespace rnoh;\n\nstd::vector\u003cstd::shared_ptr\u003cPackage\u003e\u003e PackageProvider::getPackages(Package::Context ctx) {\n    return {\n      std::make_shared\u003cSamplePackage\u003e(ctx),\n+     std::make_shared\u003cSvgaPlayerPackage\u003e(ctx),\n\n    };\n}\n```\n\n### 4.在 ArkTs 侧引入 SvgaPlayerView 组件\n\n找到 **function buildCustomComponent()**，一般位于 `entry/src/main/ets/pages/index.ets` 或 `entry/src/main/ets/rn/LoadBundle.ets`，添加：\n\n```diff\n+ import { SvgaPlayerView } from '@react-native-ohos/react-native-svga-player';\n\n@Builder\nfunction buildCustomComponent(ctx: ComponentBuilderContext) {\n+  if (ctx.componentName === SvgaPlayerView.NAME) {\n+   SvgaPlayerView({\n+     ctx: ctx.rnComponentContext,\n+     tag: ctx.tag\n+   })\n+ }\n ...\n}\n...\n```\n\n\u003e [!TIP] 本库使用了混合方案，需要添加组件名。\n\n在`entry/src/main/ets/pages/index.ets` 或 `entry/src/main/ets/rn/LoadBundle.ets` 找到常量 `arkTsComponentNames` 在其数组里添加组件名\n\n```diff\nconst arkTsComponentNames: Array\u003cstring\u003e = [\n  SampleView.NAME,\n  GeneratedSampleView.NAME,\n  PropsDisplayer.NAME,\n+ SvgaPlayerView.NAME\n  ];\n```\n\n### 5.在 ArkTs 侧引入 WebViewPackage\n\n打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加：\n\n```diff\nimport type {RNPackageContext, RNPackage} from 'rnoh/ts';\nimport {SamplePackage} from 'rnoh-sample-package/ts';\n+ import { SvgaPlayerPackage } from '@react-native-ohos/react-native-svga-player';\n\nexport function createRNPackages(ctx: RNPackageContext): RNPackage[] {\n  return [\n    new SamplePackage(ctx),\n+   new SvgaPlayerPackage(ctx)\n\n  ];\n}\n```\n\n### 6.运行\n\n点击右上角的 `sync` 按钮\n\n或者在终端执行：\n\n```bash\ncd entry\nohpm install\n```\n\n然后编译、运行即可。\n\n\n#### 开源不易，希望您可以动一动小手点点小⭐⭐\n\n#### 👴希望大家如有好的需求踊跃提交,如有问题请提交issue，空闲时间会扩充与修复优化\n\n\n## 开源协议\n\n本项目基于 [The MIT License (MIT)](https://github.com/yrjwcharm/react-native-ohos-svgaplayer/blob/master/LICENSE) ，请自由地享受和参与开源。\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyrjwcharm%2Freact-native-svga-player","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyrjwcharm%2Freact-native-svga-player","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyrjwcharm%2Freact-native-svga-player/lists"}