如何在android端动画加载gif？

Posted 2023-05-08

【中文标题】如何在android端动画加载gif？

【英文标题】：How to animate the loading gif in android side?

【发布时间】：2020-01-29 20:47:06

【问题描述】：

所以我的 React Native 项目中有这个 gif：

import React from "react";
import  View, StyleSheet, Image  from "react-native";
import PropTypes from "prop-types";

const Loading = () => (
  <View style=styles.container>
    <Image source=require("./Loading.gif") style=styles.containerLoader />
  </View>
);

const styles = StyleSheet.create(
  container: 
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    color: "#00AD50"
  ,
  containerLoader: 
    width: 150,
    height: 150
  
);

export  Loading ;

这是三个脉动点，在 ios 端可以正常工作，但在 android 端没有任何作用。我看过一些相关的帖子：

所以这个显然太旧了： Animated gif in android

但是这里的这个讨论需要将图像分解成帧： How to animate .gif images in an android?

以上内容今天仍然适用吗？如果是这样，是否有任何关于如何完成的文档？

如果没有，那我该如何为上面的 .gif 文件制作动画？

我试图实现一位同事通过此文档提供的功能： https://facebook.github.io/react-native/docs/image#gif-and-webp-support-on-android

所以在我的android/app/build.gradle:

   dependencies 
       implementation 'com.facebook.fresco:animated-gif:1.12.0'
       implementation project(':react-native-device-info')
       implementation project(':react-native-onesignal')
       implementation project(':react-native-immediate-phone-call')
       implementation fileTree(dir: "libs", include: ["*.jar"])
       implementation "com.facebook.react:react-native:+"  // From 
  node_modules

   if (enableHermes) 
     def hermesPath = "../../node_modules/hermesvm/android/";
     debugImplementation files(hermesPath + "hermes-debug.aar")
     releaseImplementation files(hermesPath + "hermes-release.aar")
    else 
     implementation jscFlavor
   

但以上内容对 gif 动画没有任何作用。因此，虽然它在这里被引用为解决方案： How to display GIF in react-native android app?

这对我不起作用。

【问题讨论】：

不是一个解决方案，而是一个建议，你可以试试 lottie for react-native.gif 的使用量很大，尺寸更大。lottie 动画更流畅，占用空间更少。如果可行，试试看!

How to display GIF in react-native android app?的可能重复

【参考方案1】：

如果您使用的是 react-native 0.60+，请检查 this post。

简而言之，参考正确的壁画版本很重要：

// For animated GIF support
implementation 'com.facebook.fresco:fresco:2.0.0'
implementation 'com.facebook.fresco:animated-gif:2.0.0'