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

这是一款使用 ReactNative 新架构 加载Android/iOS Svga 动画的开源插件三端 Svga 动画统一使用点击这里

版本：latest

rn-newarch-svga-player

[!TIP] Github 地址

安装与使用

[!TIP] 注意 ⚠️ 本库 android/ios 仅给予 Fabric 新架构 支持，旧架构不在跟进，若需旧架构支持请移步github.com/yrjwcharm/r…

npm

npm install rn-newarch-svga-player

yarn

yarn add rn-newarch-svga-player

android 需要

 ./gradlew generateCodegenArtifactsFromSchema

ios 需要

  cd ios
  bundle install && bundle exec pod install

API 参考

Props

属性	类型	默认值	描述
source	SvgaSource	-	SVGA 文件源
autoPlay	boolean	true	是否自动播放
loops	number	0	循环播放次数，默认值：0 表示无限循环
clearsAfterStop	boolean	true	动画停止后是否清空画布
fillMode	'Forward' | 'Backward'	'Forward'	填充模式：Forward 停留在最后一帧，Backward 回到第一帧
onFinished	function	-	播放完成时的回调函数
onFrame	function	-	帧变化时的回调函数
onPercentage	function	-	播放进度变化时的回调函数

Ref 方法

方法	描述
startAnimation()	从第 0 帧开始播放动画
startAnimationWithRange(location, length, reverse)	在指定范围内播放动画，可选择反向播放
pauseAnimation()	暂停动画，停留在当前帧
stopAnimation()	停止动画，根据 clearsAfterStop 决定是否清空画布
stepToFrame(frame, andPlay)	跳转到指定帧，可选择是否从该帧开始播放
stepToPercentage(percentage, andPlay)	跳转到指定百分比位置 (0.0-1.0)，可选择是否播放

若想更改库的别名 react-native-svga-player 来导入。你则需要把 rn-newarch-svga-player 库修改下，重新 yarn 执行

+  "dependencies": {
    "@react-native-oh/react-native-harmony": "0.72.48",
    "patch-package": "^8.0.0",
    "postinstall-postinstall": "^2.1.0",
    "react": "18.2.0",
    "react-native": "0.72.5",
-    "rn-newarch-svga-player":"^latest"
+   "react-native-svga-player":"npm:rn-newarch-svga-player@latest"
  },

ios react-native 0.76 以上 AppDelegate.mm 需要显示注册该组件

#import "AppDelegate.h"
#import "RCTSvgaPlayer.h"
#import <React/RCTBundleURLProvider.h>
#import <React/RCTBridge+Private.h>

@implementation AppDelegate
// ...

+ - (NSDictionary<NSString *,Class<RCTComponentViewProtocol>> *)thirdPartyFabricComponents
+ {
+  NSMutableDictionary * dictionary = [super thirdPartyFabricComponents].mutableCopy;
+  dictionary[@"RNSvgaPlayer"] = [RCTSvgaPlayer class];
+  return dictionary;
+ }

@end

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

import React from "react";
import { View, Dimensions, StyleSheet } from "react-native";
import { RNSvgaPlayer } from "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 动画统一使用点击这里

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

👴 希望大家如有好的需求踊跃提交,如有问题请提交 issue，空闲时间会扩充与修复优化

开源协议

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