【发布时间】: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 动画更流畅,占用空间更少。如果可行,试试看!
标签: android react-native