# react-native-svga **Repository Path**: MuNitCat/react-native-svga ## Basic Information - **Project Name**: react-native-svga - **Description**: 修改react-native-svga版,支持批量更换key - **Primary Language**: Unknown - **License**: MulanPSL-2.0 - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2023-11-07 - **Last Updated**: 2025-06-12 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ## 修改功能 2023.11.07 增加批量更换SVGA的key,并且支持对文字更换 但是仅支持在线地址(http/https),本地文件地址需要使用`SVGAModule`进行处理 ```js import {SVGAModule, SVGAView} from 'react-native-svga'; const testSvga = SVGAModule.getAssets(require('./src/images/test.svga')); const testImg2 = SVGAModule.getAssets(require('./src/images/btn_home.png')); let svgaOption = [ {type: 'SVGA', url: testUrl}, {type: 'IMG', key: '03', url: testImg2}, // {type: 'IMG', key: '04', url: testImg}, {type: 'TEXT', text: 'Hello word!', key: '02', color: '#f40f40', size: 24}, {type: 'TEXT', text: 'Hello word!', key: '01', color: '#ffa8a8', size: 24}, {type: 'TEXT', text: 'Lv.50', key: '04', color: '#FFFFFF', size: 22}, ]; { // setShow(false); }} /> ``` + SVGA: 即svga资源需要放在数组的第一个,且只有一个 + IMG:更换图片资源,需要指定key值与资源地址 + TEXT:颜色color和字体大小size都是必填项,无默认属性值 + 除了SVGA需要放在数组中的第一个以外,其他元素顺序无要求 ## 主要改动 ### 1、ios 开启 静音状态也能播放声音 ### 2、对 source 进行解析,处理图片替换的情况(目前只针对 远程资源 进行处理) `http://xxxx/a.svga`|`http://xxx.a.png`|`imagekey` ### 3、处理了Android配置的一些不兼容问题,需要在 `Project` -> `build.gradle` 最后面增加 ```gradle subprojects { subproject -> if(subproject["name"] == 'react-native-svga'){ subproject.configurations { compile { } } } } ``` ### 注意,`onFinished` 后,要设置 `source = null` ,否则会产生2次`source`变动 # react-native-svga SVGA 是一种同时兼容 iOS / Android / Flutter / Web 多个平台的动画格式。 这是根据原生svga封装的RN插件 ## 特点 1. 新增预加载 2. 可以把svga资源放js里,而不必放原生项目中 ## 安装 `yarn add react-native-svga` ### 1. 运行 - ios `npx pod-install` - android RN>=6.0的直接更新gradle依赖即可,rn<6.0 `npx jetify` ### 2. Android 配置 - AndroidManifest.xml 标签里配置 `tools:replace="android:allowBackup"` 否则会报错 ``` * What went wrong: Execution failed for task ':app:processDebugMainManifest'. > Manifest merger failed : Attribute application@allowBackup value=(false) from AndroidManifest.xml:11:7-34 is also present at [com.github.yyued:SVGAPlayer-Android:2.5.15] AndroidManifest.xml:12:9-35 value=(true). Suggestion: add 'tools:replace="android:allowBackup"' to element at AndroidManifest.xml:7:5-12:19 to override. ``` ### 3. iOS 配置 无 ### 4. JS项目配置(如果不把svga文件放js中可以跳过) `metro.config.js` , 否则会报引用不到资源 ``` module.exports = (async () => { const defaultAssetExts = require("metro-config/src/defaults/defaults").assetExts; return { resolver: { assetExts: [...defaultAssetExts, 'svga'], }, transformer: { getTransformOptions: async () => ({ transform: { experimentalImportSupport: false, inlineRequires: false, }, }), }, }; })(); ``` ## 使用 大概就是这样吧, svgaTag获取到实例后可以作一些暂停,清空,恢复等操作,具体看example ``` import { ISvgaProps, SVGAView } from 'react-native-svga' // 本地 source: SVGAModule.getAssets(require('./posche.svga')) // 网络 source: 'https://github.com/yyued/SVGA-Samples/blob/master/heartbeat.svga?raw=true' // eg const { width, height } = Dimensions.get('window') const kScreenW = width const kScreenH = height let svgaTag: SVGAView (svgaTag = ref)} source: 'https://github.com/yyued/SVGA-Samples/blob/master/heartbeat.svga?raw=true' loop={1} style={{ width: kScreenW, height: kScreenH }} onFinished={() => { console.log("finish") }} /> // 暂停 svgaTag.pauseAnimation() // 恢复 svgaTag.startAnimation() ... ```