利用ReactNative加载Svga动画支持三端【Android/IOS/Harmony】

这是一款利用ReactNative加载Svga动画的播放器插件 [Android/ios/harmony三端统一]

   版本：latest

    为了方便各人利用，我基于自己原先封装的RN-HarmonySvgaPlayer的插件https://github.com/yrjwcharm/react-native-ohos-svgaplayer扩展了其他另外两端支持[android/ios] ，弥补了之前还需要额外安装其他两端的SvgaPlayer库的弊端，现在统一利用新库名 @yrjwcharm/react-native-svga-player
  

@yrjwcharm/react-native-svga-player


   [!TIP] Github 地点
  安装与利用

npm

1. npm install @yrjwcharm/react-native-svga-player

复制代码

yarn

1. yarn add @yrjwcharm/react-native-svga-player

复制代码

下面的代码展示了这个库的基本利用场景：
   [!WARNING] 利用时 import RNSvgaPlayer from ‘@yrjwchram/react-native-svga-player’

1. import React from "react";
2. import { View, Dimensions, StyleSheet } from "react-native";
3. import RNSvgaPlayer from '@yrjwcharm/react-native-svga-player'
5. export function App() {
6.   return (
7.    <RNSvgaPlayer
8.     source="https://raw.githubusercontent.com/yyued/SVGAPlayer-iOS/master/SVGAPlayer/Samples/Goddess.svga"
9.         style={{
10.           width: 300,
11.           height: 150,
12.         }}
13.       />
14.   );
15. }
17. const styles = StyleSheet.create({
18.    container: {
19.     flex: 1,
20.     justifyContent: "flex-start",
21.     alignItems: "center",
22.   },
23. });

复制代码

更多详情用法参考 三端Svga动画统一利用点击这里
Link

android/ios 主动Link编译就行 ios 需要pod install

目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步调需要手动配置。
1、执行 package.json里的 codegen脚本命令 yarn codegen

1.   "scripts": {
2.     "codegen": "react-native codegen-harmony --cpp-output-path ./harmony/entry/src/main/cpp/generated --rnoh-module-path ./harmony/entry/oh_modules/@rnoh/react-native-openharmony --no-safety-check"
3.   }

复制代码

2.执行完codegen以后 会在 harmony工程 entry/src/main/cpp/generated下天生对应的头文件，该库默认有三个文件，特别注意天生的RNOHGeneratedPackage.h文件
3、接下来利用 DevEco Studio 打开项目里的 HarmonyOS 工程 harmony

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

1. {
2.   ...
3.   "overrides": {
4.     "@rnoh/react-native-openharmony": "file:../libs/react_native_openharmony_release.har",
5.   }
6. }

复制代码

• 2.引入原生端代码 ，目前有两种方法：
  
  
  
  • 
    
    • 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）；
      
    
    
  • 
    
    • 直接链接源码。
      
    
    
  
  

方法一：通过 har 包引入（推荐）
   [!TIP] har 包位于三方库安装路径的 harmony 文件夹下。
  打开 entry/oh-package.json5，添加以下依靠

1. "dependencies": {
2.     "@rnoh/react-native-openharmony": "file:../libs/react_native_openharmony_release.har",
3.     "@react-native-ohos/react-native-svga-player": "file:../../node_modules/react-native-ohos-svgaplayer/harmony/svgaplayer.har",
4.   },

复制代码

点击右上角的 sync 按钮
大概在终端执行：

1. cd entry
2. ohpm install

复制代码

方法二：直接链接源码
   [!TIP] 从react-native-ohos-svga-player获取到svgaplayer源码文件，直接在harmony工程中通过File->New->Import->Import Module导入即可 主工程entry/oh-package.json5中添加

1. "dependencies": {
2.     "@rnoh/react-native-openharmony": "file:../libs/react_native_openharmony_release.har",
3.     "@react-native-ohos/react-native-svga-player": "file:../svgaplayer",
5.   }

复制代码

• 3.打开 entry/src/main/cpp/PackageProvider.cpp，添加：
  
  1. #include "RNOH/PackageProvider.h"
  2. #include "SamplePackage.h"
  3. + #include "generated/RNOHGeneratedPackage.h"
  5. using namespace rnoh;
  7. std::vector<std::shared_ptr<Package>> PackageProvider::getPackages(Package::Context ctx) {
  8.     return {
  9.       std::make_shared<SamplePackage>(ctx),
  10. +     std::make_shared<RNOHGeneratedPackage>(ctx),
  12.     };
  13. }

  复制代码
• 4.在 ArkTs 侧引入 SvgaPlayerView 组件
  

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

1.   ...
2. + import { SvgaPlayerView } from '@react-native-ohos/react-native-svga-player';
4.   @Builder
5. export function buildCustomRNComponent(ctx: ComponentBuilderContext) {
6.   ...
7. +  if (ctx.componentName === SvgaPlayerView.NAME) {
8. +     SvgaPlayerView({
9. +       ctx: ctx.rnComponentContext,
10. +       tag: ctx.tag,
11. +     })
12. +   }
13.     ...
14.   }
15.   ...

复制代码

• 
  
  •            [!TIP] 本库利用了混淆方案，需要添加组件名。
    
  
  

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

1. const arkTsComponentNames: Array<string> = [
2.   SampleView.NAME,
3.   GeneratedSampleView.NAME,
4.   PropsDisplayer.NAME,
5. + SvgaPlayerView.NAME
6.   ];

复制代码

运行

点击右上角的 sync 按钮
大概在终端执行：

1. cd entry
2. ohpm install

复制代码

然后编译、运行即可。
兼容三端[Android、iOS、Harmony]的 Svga动画 demo示例 -> https://github.com/yrjwcharm/react-native-ohos/tree/feature/react-native-svga-player

开源不易，希望您可以动一动小手点点小⭐⭐