React Native 0.70.3中播放SVGA动画的最优方案咨询

方案一：使用维护活跃的@svga/react-native库 #

这个库是SVGA官方维护的React Native适配库，支持React Native 0.60+版本，包括你的0.70.3版本，能稳定处理多SVGA动画播放场景。

安装步骤 #

npm install @svga/react-native --save
# 或使用yarn
yarn add @svga/react-native

多动画播放示例 #

import React from 'react';
import { View } from 'react-native';
import { SVGAPlayer } from '@svga/react-native';

const MultiSVGAPlayer = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'space-around', alignItems: 'center' }}>
      {/* 第一个SVGA动画 */}
      <SVGAPlayer
        source={{ uri: 'https://example.com/first.svga' }}
        style={{ width: 200, height: 200 }}
        loop={true}
      />
      {/* 第二个SVGA动画 */}
      <SVGAPlayer
        source={{ uri: 'https://example.com/second.svga' }}
        style={{ width: 150, height: 150 }}
        autoPlay={false}
        ref={(ref) => this.secondPlayer = ref}
      />
      {/* 可通过ref手动控制播放/暂停 */}
      {/* <Button title="播放第二个动画" onPress={() => this.secondPlayer?.play()} /> */}
    </View>
  );
};

export default MultiSVGAPlayer;

该库支持本地、网络资源加载，提供完整播放控制API（play、pause、stop、setFrame等），适配多动画并行播放场景。

方案二：自行基于原生SVGA SDK封装RN模块 #

若对第三方库有顾虑，可直接基于原生SVGA SDK封装自定义RN模块：

• iOS端：使用官方SVGAKit（支持iOS 9+），通过RN NativeModule桥接播放控制逻辑；
• Android端：使用官方SVGA-Android（支持API 16+），封装ReactContextBaseJavaModule实现方法桥接。

核心步骤 #

1. iOS：在Podfile中添加pod 'SVGAKit'，创建RN原生模块封装SVGAImageView的加载、播放逻辑；
2. Android：在build.gradle中添加SVGA依赖，创建原生模块封装SVGAImageView相关方法；
3. RN端通过NativeModules调用封装好的方法，实现多动画的自定义管理。

这种方式完全可控，能精准适配RN 0.70.3版本，还可根据业务需求定制动画交互逻辑。

方案三：转换SVGA为Lottie动画（备选） #

若你持有SVGA动画源文件，可通过SVGA编辑器将其导出为Lottie支持的JSON格式，再使用lottie-react-native库播放。该库对RN新版本兼容性极佳，生态成熟，多动画播放实现成本低。

示例代码 #

import React from 'react';
import { View } from 'react-native';
import LottieView from 'lottie-react-native';

const MultiLottiePlayer = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'space-around' }}>
      <LottieView
        source={require('./animations/first.json')}
        autoPlay
        loop
        style={{ width: 200, height: 200 }}
      />
      <LottieView
        source={{ uri: 'https://example.com/second.json' }}
        autoPlay
        loop
        style={{ width: 150, height: 150 }}
      />
    </View>
  );
};

export default MultiLottiePlayer;

注意：此方案仅适用于可转换格式的SVGA动画，无法获取源文件的成品SVGA不适用。

内容的提问来源于stack exchange，提问作者React_Coder