GIF在我的React Native应用程序的Android版本中没有动画

Question

我正在努力让我的 GIF 在我的 RN 应用程序的 Android 版本上制作动画。iOS 版本正在按预期对循环 GIF 进行动画处理，但我只在 Android 设备上的 GIF 中看到卡住的"单帧"图像。

根据调试和 RN 文档，需要在/android/app/build.gradle中的dependencies中添加几行implementation，但即使在清理 gradle(在/android文件夹中运行./gradlew clean)并删除 RN 应用程序的缓存(在项目根文件夹中运行react-native start --reset-cache)之后，我的应用程序也没有任何区别。

我已经用谷歌搜索并尝试了很多。根据我的调试冒险，我尝试并仔细检查了这些建议，这些建议似乎对其他人有用，但似乎对我不起作用......

• 我已经尝试了几个版本的壁画库，似乎 是必需的，我也尝试将行放在两个 底部以及dependencies的顶部。
• 一些答案还建议添加一行或多行代码Android/app/ProGuard-rules.pro但这不会改变 什么都行。
• 我以应用程序的不同方式使用 GIF，但它总是有width和height包含在<Image />的style物业中。
• 我尝试过使用来自不同 CDN 和域的 GIF-uris。
• 在我的测试设备上重新安装了该应用程序。
• 关闭并重新打开我的代码编辑器。

我使用以下版本：

• 爪哇：11.0.12
• 反应原生：0.65
• 安卓软件开发工具包：30.0.2
• NPM：6.14.4

这是我的完整/android/app/build.gradle：

apply plugin: "com.android.application"
import com.android.build.OutputFile

project.ext.react = [
enableHermes: false,  // clean and rebuild if changing
]
apply from: "../../node_modules/react-native/react.gradle"

def enableSeparateBuildPerCPUArchitecture = false
def enableProguardInReleaseBuilds = false
def jscFlavor = 'org.webkit:android-jsc:+'
def enableHermes = project.ext.react.get("enableHermes", false);
android {
ndkVersion rootProject.ext.ndkVersion
compileSdkVersion rootProject.ext.compileSdkVersion
defaultConfig {
applicationId "com.example.app"
minSdkVersion rootProject.ext.minSdkVersion
targetSdkVersion rootProject.ext.targetSdkVersion
versionCode 1
versionName "1.0"
}
splits {
abi {
reset()
enable enableSeparateBuildPerCPUArchitecture
universalApk false  // If true, also generate a universal APK
include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
}
}
signingConfigs {
debug {
storeFile file('debug.keystore')
storePassword 'android'
keyAlias 'androiddebugkey'
keyPassword 'android'
}
}
buildTypes {
debug {
signingConfig signingConfigs.debug
}
release {
// Caution! In production, you need to generate your own keystore file.
// see https://reactnative.dev/docs/signed-apk-android.
signingConfig signingConfigs.debug
minifyEnabled enableProguardInReleaseBuilds
proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
}
}
// applicationVariants are e.g. debug, release
applicationVariants.all { variant ->
variant.outputs.each { output ->
// For each separate APK per architecture, set a unique version code as described here:
// https://developer.android.com/studio/build/configure-apk-splits.html
// Example: versionCode 1 will generate 1001 for armeabi-v7a, 1002 for x86, etc.
def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
def abi = output.getFilter(OutputFile.ABI)
if (abi != null) {  // null for the universal-debug, universal-release variants
output.versionCodeOverride =
defaultConfig.versionCode * 1000 + versionCodes.get(abi)
}
}
}
}
dependencies {
implementation fileTree(dir: "libs", include: ["*.jar"])
//noinspection GradleDynamicVersion
implementation "com.facebook.react:react-native:+"  // From node_modules
implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"
debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
exclude group:'com.facebook.fbjni'
}
debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
exclude group:'com.facebook.flipper'
exclude group:'com.squareup.okhttp3', module:'okhttp'
}
debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") {
exclude group:'com.facebook.flipper'
}
if (enableHermes) {
def hermesPath = "../../node_modules/hermes-engine/android/";
debugImplementation files(hermesPath + "hermes-debug.aar")
releaseImplementation files(hermesPath + "hermes-release.aar")
} else {
implementation jscFlavor
}

implementation project(':react-native-notifications')
implementation 'com.google.firebase:firebase-core:16.0.0'
implementation 'com.google.android.gms:play-services-ads:19.8.0'
implementation "androidx.appcompat:appcompat:1.0.0"
implementation 'com.facebook.fresco:fresco:2.4.0'
implementation 'com.facebook.fresco:animated-gif:2.4.0'
implementation 'com.facebook.fresco:webpsupport:2.4.0'
}
// Run this once to be able to run the application with BUCK
// puts all compile dependencies into folder libs for BUCK to use
task copyDownloadableDepsToLibs(type: Copy) {
from configurations.compile
into 'libs'
}
apply plugin: 'com.google.gms.google-services'
apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

如果我错过了一些明显的东西，请告诉我。我在iOS开发方面肯定更有经验，所以我很可能错过了一些东西：-)

Answer 1

我在使用 react-native 0.66.3 时遇到了同样的问题，并且在app/build.gradle中将com.facebook.fresco:animated-gif更新为2.6.0对我有用

Answer 2

更简单的解决方法是使用 FastImage 库，该库内置了 Gif 支持，并具有缓存等附加优势

Answer 3

Android 上的 GIF 和 WebP 支持

在构建自己的原生代码时，Android 默认不支持 GIF 和 WebP。

您需要在 android/app/build.gradle 中添加一些可选模块，具体取决于您的应用程序的需求。

dependencies {
// If your app supports Android versions before Ice Cream Sandwich (API level 14)
implementation 'com.facebook.fresco:animated-base-support:1.3.0'
// For animated GIF support
implementation 'com.facebook.fresco:animated-gif:2.5.0'
// For WebP support, including animated WebP
implementation 'com.facebook.fresco:animated-webp:2.5.0'
implementation 'com.facebook.fresco:webpsupport:2.5.0'
// For WebP support, without animations
implementation 'com.facebook.fresco:webpsupport:2.5.0'
}

您可以按照官方文档链接进行操作

Answer 4

我自己在 Android 上使用 GIF 时遇到了问题，最终转向了谷歌似乎接受的动画 webp，甚至有自己的转换工具。 多年来，他们一直有Android支持，并且似乎更加一致地工作。 甚至可以通过将扩展名更改为 webp 而不是 PNG 来工作？

https://frescolib.org/docs/webp-support.html

Answer 5

如何在 React Native 中显示动画 gif？

添加android/app/build.gradle

// For animated GIF support
compile 'com.facebook.fresco:animated-gif:1.+'

Answer 6

你只需要react-native-fast-image库。

<快速图像 源="{{" resizeMode="{FastImage.resizeMode.cover}" onError="{()">console.log( '图像不存在或看起来像 http：'， ) } 样式={{ 宽度："100%"， 高度："100%"，enter code here边框半径： 10， }}/>