# 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},
];

 <SVGAView
    source={svgaOption}
    loops={1}
    style={{
      width: 200,
      height: 120,
    }}
    onFinished={() => {
      // 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    <application>标签里配置 `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 <application> 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

<SVGAView
                  ref={ref => (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()

...
```