使用ReactNative加载Svga动画支持三端【android/ios/harmony】

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

版本:latest

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

@yrjwcharm/react-native-svga-player

!TIP\] [Github 地址](https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fyrjwcharm%2Freact-native-svga-player "https://github.com/yrjwcharm/react-native-svga-player")

安装与使用

npm
bash 复制代码
npm install @yrjwcharm/react-native-svga-player
yarn
bash 复制代码
yarn add @yrjwcharm/react-native-svga-player

下面的代码展示了这个库的基本使用场景:

!WARNING\] 使用时 import RNSvgaPlayer from '@yrjwchram/react-native-svga-player'

js 复制代码
import React from "react";
import { View, Dimensions, StyleSheet } from "react-native";
import RNSvgaPlayer from '@yrjwcharm/react-native-svga-player'

export function App() {
  return (
   <RNSvgaPlayer
    source="https://raw.githubusercontent.com/yyued/SVGAPlayer-iOS/master/SVGAPlayer/Samples/Goddess.svga"
        style={{
          width: 300,
          height: 150,
        }}
      />
  );
}

const styles = StyleSheet.create({
   container: {
    flex: 1,
    justifyContent: "flex-start",
    alignItems: "center",
  },
});

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

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

目前 HarmonyOS 暂不支持 AutoLink,所以 Link 步骤需要手动配置。

1、执行 package.json里的 codegen脚本命令 yarn codegen

js 复制代码
  "scripts": {
    "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"
  }

2.执行完codegen以后 会在 harmony工程 entry/src/main/cpp/generated下生成对应的头文件,该库默认有三个文件,特别注意生成的RNOHGeneratedPackage.h文件

3、接下来使用 DevEco Studio 打开项目里的 HarmonyOS 工程 harmony

  • 1.在工程根目录的 oh-package.json5 添加 overrides 字段
json 复制代码
{
  ...
  "overrides": {
    "@rnoh/react-native-openharmony": "file:../libs/react_native_openharmony_release.har",//这个你项目工程怎么引入的就怎么引入
  
  }
}
  • 2.引入原生端代码 ,目前有两种方法:

      1. 通过 har 包引入(在 IDE 完善相关功能后该方法会被遗弃,目前首选此方法);
      1. 直接链接源码。

方法一:通过 har 包引入(推荐)

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

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

json 复制代码
"dependencies": {
    "@rnoh/react-native-openharmony": "file:../libs/react_native_openharmony_release.har",//这个你项目工程怎么引入的就怎么引入
    "@react-native-ohos/react-native-svga-player": "file:../../node_modules/react-native-ohos-svgaplayer/harmony/svgaplayer.har",
  },

点击右上角的 sync 按钮

或者在终端执行:

bash 复制代码
cd entry
ohpm install

方法二:直接链接源码

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

json 复制代码
"dependencies": {
    "@rnoh/react-native-openharmony": "file:../libs/react_native_openharmony_release.har",//这个你项目工程怎么引入的就怎么引入
    "@react-native-ohos/react-native-svga-player": "file:../svgaplayer",

  }
  • 3.打开 entry/src/main/cpp/PackageProvider.cpp,添加:

    diff 复制代码
    #include "RNOH/PackageProvider.h"
    #include "SamplePackage.h"
    + #include "generated/RNOHGeneratedPackage.h"
    
    using namespace rnoh;
    
    std::vector<std::shared_ptr<Package>> PackageProvider::getPackages(Package::Context ctx) {
        return {
          std::make_shared<SamplePackage>(ctx),
    +     std::make_shared<RNOHGeneratedPackage>(ctx),
    
        };
    }
  • 4.在 ArkTs 侧引入 SvgaPlayerView 组件

找到 function buildCustomRNComponent() ,一般位于 entry/src/main/ets/pages/index.etsentry/src/main/ets/rn/LoadBundle.ets,添加:

diff 复制代码
  ...
+ import { SvgaPlayerView } from '@react-native-ohos/react-native-svga-player';

  @Builder
export function buildCustomRNComponent(ctx: ComponentBuilderContext) {
  ...
+  if (ctx.componentName === SvgaPlayerView.NAME) {
+     SvgaPlayerView({
+       ctx: ctx.rnComponentContext,
+       tag: ctx.tag,
+     })
+   }
    ...
  }
  ...
    1. !TIP\] 本库使用了混合方案,需要添加组件名。

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

diff 复制代码
const arkTsComponentNames: Array<string> = [
  SampleView.NAME,
  GeneratedSampleView.NAME,
  PropsDisplayer.NAME,
+ SvgaPlayerView.NAME
  ];

运行

点击右上角的 sync 按钮

或者在终端执行:

bash 复制代码
cd entry
ohpm install

然后编译、运行即可。

兼容三端[Android、iOS、Harmony]的 Svga动画 demo示例 -> github.com/yrjwcharm/r...

开源不易,希望您可以动一动小手点点小⭐⭐
👴希望大家如有好的需求踊跃提交,如有问题请提交issue,空闲时间会扩充与修复优化

开源协议

本项目基于 The MIT License (MIT) ,请自由地享受和参与开源。

相关推荐
江城开朗的豌豆1 分钟前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆2 分钟前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆2 分钟前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js
江城开朗的豌豆3 分钟前
Vue路由守卫全攻略:给页面访问装上'安检门'
前端·javascript·vue.js
小磊哥er10 分钟前
【前端工程化】前端组件模版构建那些事
前端
前端 贾公子11 分钟前
monorepo + Turborepo --- 开发应用程序
java·前端·javascript
江城开朗的豌豆15 分钟前
Vue路由传参避坑指南:params和query的那些猫腻
前端·javascript·vue.js
十里青山23 分钟前
超好用的vue图片预览插件更新啦,hevue-img-preview 7.0.0版本正式发布,支持vue2/vue3/移动/pc,增加缩略图、下载、自定义样式等
前端·javascript·vue.js
lichenyang45332 分钟前
css模块化以及rem布局
前端·javascript·css
小熊哥^--^34 分钟前
条件渲染 v-show与v-if
前端