如何在android侧面制作加载的gif动画?

时间:2019-09-30 14:23:02

标签: android react-native

所以我的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?

那对我不起作用。

1 个答案:

答案 0 :(得分:0)

如果您使用的是本机0.60+,也请检查enter image description here

简而言之,重要的是要引用正确的壁画版本:

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