{"_rev":"4-d64f0679f90460bf12c29414ccf338a2","time":{"created":"2025-08-01T19:08:47.548Z","modified":"2025-08-01T19:08:48.083Z","1.1.2":"2025-08-01T18:52:19.728Z","1.1.3":"2025-08-01T19:08:47.846Z"},"_id":"@angrycat123/rn-newarch-svga-player","name":"@angrycat123/rn-newarch-svga-player","dist-tags":{"latest":"1.1.3"},"versions":{"1.1.3":{"author":{"name":"闫瑞锋"},"bugs":{"url":"https://github.com/AngryBigCat/rn-newarch-svga-player/issues"},"codegenConfig":{"android":{"javaPackageName":"com.svgaplayer"},"ios":{"componentProvider":{"RNSvgaPlayer":"RCTSvgaPlayer"}},"jsSrcsDir":"./src/specs","name":"RNSvgaPlayerSpec","type":"components"},"dependencies":{},"description":"这是一款使用ReactNative Fabric新架构加载Svga动画的开源插件","devDependencies":{"@types/react":"^18.2.47","react":"18.2.0","react-native":"0.72.5"},"homepage":"https://github.com/AngryBigCat/rn-newarch-svga-player#readme","keywords":["fabric","player","react-native","svga","SvgaPlayer"],"license":"ISC","main":"index.tsx","name":"@angrycat123/rn-newarch-svga-player","peerDependencies":{"react":"*","react-native":"*"},"repository":{"type":"git","url":"git+https://github.com/AngryBigCat/rn-newarch-svga-player.git"},"scripts":{"codegen-lib":"react-native codegen-lib-harmony --no-safety-check --npm-package-name react-native-ohos-svgaplayer --cpp-output-path ../../harmony/svgaplayer/src/main/cpp/generated --ets-output-path ../../harmony/svgaplayer/src/main/ets/generated --turbo-modules-spec-paths ./src  --arkts-components-spec-paths ./src"},"version":"1.1.3","_id":"@angrycat123/rn-newarch-svga-player@1.1.3","gitHead":"16faa323e60e557f7a8ffcec75878af53cf46bcb","_nodeVersion":"22.17.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-COJzinor10d8jSjFWBqk4h1+5FGx/FOyedjibPVZKoG3VKZ8xJ5weL4h4vtYXNG2cMXbf9u7p0c8RCH3v270BA==","shasum":"560782b5e84ed0e2deee53494c20c1ca27894cf7","tarball":"https://registry.npmjs.org/@angrycat123/rn-newarch-svga-player/-/rn-newarch-svga-player-1.1.3.tgz","fileCount":18,"unpackedSize":41391,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIEzvFtm+EHXpZQSq/TENsyjGLt9D3H36KL9yC43F1PrlAiEAhVq+UYQ2u+PrUVjPqH+HfaWq0wMWsUbB8qSW3G0C/zM="}]},"_npmUser":{"name":"angrycat123","email":"angrycat123@qq.com"},"directories":{},"maintainers":[{"name":"angrycat123","email":"angrycat123@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/rn-newarch-svga-player_1.1.3_1754075327667_0.4118367162599117"},"_hasShrinkwrap":false}},"maintainers":[{"name":"angrycat123","email":"angrycat123@qq.com"}],"description":"这是一款使用ReactNative Fabric新架构加载Svga动画的开源插件","homepage":"https://github.com/AngryBigCat/rn-newarch-svga-player#readme","keywords":["fabric","player","react-native","svga","SvgaPlayer"],"repository":{"type":"git","url":"git+https://github.com/AngryBigCat/rn-newarch-svga-player.git"},"author":{"name":"闫瑞锋"},"bugs":{"url":"https://github.com/AngryBigCat/rn-newarch-svga-player/issues"},"license":"ISC","readme":"## **_这是一款使用 ReactNative 加载`Android/iOS` Svga 动画的播放器插件_** [三端 Svga 动画统一使用点击这里](https://github.com/yrjwcharm/react-native-ohos/tree/feature/rnoh/svgaplayer)\n\n> ### 版本：latest\n\n<p align=\"center\">\n  <h1 align=\"center\"> <code>rn-newarch-svga-player</code> </h1>\n</p>\n<p align=\"center\">\n    <a href=\"https://github.com/wonday/react-native-pdf/blob/master/LICENSE\">\n        <img src=\"https://img.shields.io/badge/license-MIT-green.svg\" alt=\"License\" />\n    </a>\n</p>\n\n> [!TIP] [Github 地址](https://github.com/yrjwcharm/rn-newarch-svga-player)\n\n## 安装与使用\n\n> [!TIP] 注意 ⚠️ 本库 android/ios 仅给予 Fabric 新架构支持，旧架构不在跟进，若需旧架构支持请移步<https://github.com/yrjwcharm/react-native-svga-player>\n\n**确保你的 Android/iOS 已经开启了新架构支持 <https://reactnative.cn/docs/0.72/the-new-architecture/use-app-template>**\n\n#### **npm**\n\n```bash\nnpm install rn-newarch-svga-player\n```\n\n#### **yarn**\n\n```bash\nyarn add rn-newarch-svga-player\n```\n\n> 若想更改库的别名 react-native-svga-player 来导入。你则需要把 rn-newarch-svga-player 库修改下，重新 yarn 执行\n\n```diff\n+  \"dependencies\": {\n    \"@react-native-oh/react-native-harmony\": \"0.72.48\",\n    \"patch-package\": \"^8.0.0\",\n    \"postinstall-postinstall\": \"^2.1.0\",\n    \"react\": \"18.2.0\",\n    \"react-native\": \"0.72.5\",\n-    \"rn-newarch-svga-player\":\"^1.1.2\"\n+   \"react-native-svga-player\":\"npm:rn-newarch-svga-player@1.1.2\",\n    \"react-native-ohos-svgaplayer\": \"^1.1.7\"\n  },\n```\nandroid 需要\n\n```bash\n./gradlew generateCodegenArtifactsFromSchema\n```\n\nios 需要\n\n```bash\n cd ios\n bundle install && bundle exec pod install\n```\n\n下面的代码展示了这个库的基本使用场景：\n\n```js\nimport React, { useRef, useState } from \"react\";\nimport {\n  Button,\n  SafeAreaView,\n  ScrollView,\n  StatusBar,\n  StyleSheet,\n  Text,\n  View,\n} from \"react-native\";\nimport { RNSvgaPlayer, SvgaPlayerRef } from \"react-native-svga-player\";\nconst App = () => {\n  const svgaPlayerRef = useRef < SvgaPlayerRef > null;\n  //播放网络资源\n  const [source, setSource] = useState(\n    \"https://raw.githubusercontent.com/yyued/SVGAPlayer-iOS/master/SVGAPlayer/Samples/Goddess.svga\"\n  );\n  //播放本地资源\n  // const [source, setSource] = useState(\n  //   'homePage_studyPlanner_computer_welcome.svga',\n  // );\n  return (\n    <SafeAreaView style={styles.container}>\n      <StatusBar barStyle={\"dark-content\"} />\n      <ScrollView showsVerticalScrollIndicator={false}>\n        <Text style={styles.welcome}>Svga</Text>\n        <RNSvgaPlayer\n          ref={svgaPlayerRef}\n          source={source}\n          autoPlay={true}\n          loops={1} // 循环次数，默认 0无限循环\n          clearsAfterStop={false} // 停止后清空画布，默认 true\n          style={styles.svgaStyle}\n          onFinished={() => {\n            console.log(\"播放完成\");\n          }} // 播放完成回调\n          onLoaded={() => {\n            console.log(\"动画加载完成\");\n          }}\n        />\n        <View style={styles.flexAround}>\n          <Button\n            title=\"开始动画\"\n            onPress={() => {\n              svgaPlayerRef.current?.startAnimation();\n            }}\n          />\n          <Button\n            title=\"暂停动画\"\n            onPress={() => {\n              // svgaPlayerRef.current?.pauseAnimation();\n            }}\n          />\n          <Button\n            title=\"停止动画\"\n            onPress={() => {\n              svgaPlayerRef.current?.stopAnimation();\n            }}\n          />\n        </View>\n        <View style={[styles.flexAround, { marginTop: 20 }]}>\n          <Button\n            title=\"手动加载动画\"\n            onPress={() => {\n              setSource(\n                \"https://raw.githubusercontent.com/yyued/SVGAPlayer-iOS/master/SVGAPlayer/Samples/matteBitmap.svga\"\n              );\n            }}\n          />\n          <Button\n            title=\"指定帧开始\"\n            onPress={() => {\n              // svgaPlayerRef.current?.stepToFrame(20, true);\n            }}\n          />\n          <Button\n            title=\"指定百分比开始\"\n            onPress={() => {\n              // svgaPlayerRef.current?.stepToPercentage(1, true);\n            }}\n          />\n        </View>\n      </ScrollView>\n    </SafeAreaView>\n  );\n};\nexport default App;\nconst styles = StyleSheet.create({\n  flexAround: { flexDirection: \"row\", justifyContent: \"space-around\" },\n  container: {\n    flex: 1,\n  },\n  svgaStyle: {\n    width: 150,\n    height: 150,\n    marginTop: 30,\n  },\n  welcome: {\n    fontSize: 20,\n    textAlign: \"center\",\n    margin: 10,\n    marginTop: 80,\n  },\n  instructions: {\n    textAlign: \"center\",\n    color: \"#333333\",\n    marginBottom: 5,\n  },\n});\n```\n\n#### 新架构[Android/iOS]demo 请参考 <https://github.com/yrjwcharm/react-native-ohos/tree/feature/newarch/svgaplayer>\n\n更多详情用法参考 [三端 Svga 动画统一使用点击这里](https://github.com/yrjwcharm/react-native-ohos/tree/feature/rnoh/svgaplayer)\n\n#### 开源不易，希望您可以动一动小手点点小 ⭐⭐\n\n#### 👴 希望大家如有好的需求踊跃提交,如有问题请提交 issue，空闲时间会扩充与修复优化\n\n## 开源协议\n\n本项目基于 [The MIT License (MIT)](https://github.com/yrjwcharm/react-native-ohos-svgaplayer/blob/master/LICENSE) ，请自由地享受和参与开源。\n","readmeFilename":"readme.md"}