我在我的 RN 应用程序的 Android 版本上无法使 GIF 动画正常播放。IOS 版本正在按预期循环播放 GIF，但在 Android 设备上，我只能看到一个卡住的“单帧”图像。
根据调试和 RN 文档，需要在 /android/app/build.gradle 文件的 dependencies 中添加一些 implementation 代码行，但即使在清理 gradle（在/android文件夹中运行 ./gradlew clean）并删除 RN 应用程序的缓存（在项目根目录中运行 react-native start --reset-cache），我在应用程序中没有看到任何区别。
我已经尝试过很多方法，也进行了谷歌搜索。基于我的调试探险，我尝试了并仔细检查了这些建议，这些建议似乎适用于其他人，但对我来说并不起作用...
1. 我尝试了几个版本的 Fresco 库，似乎是必需的，并且还尝试将这些代码行放置在依赖项的底部和顶部。
2. 一些答案还建议在 android/app/proguard-rules.pro 中添加一行或多行代码，但这也没有改变任何东西。
3. 我在应用程序中以不同的方式使用 GIF，但它总是将宽度和高度包含在![]()
的 style 属性中。
4. 我已经尝试过来自不同 CDN 和域的 GIF-uri。
5. 在我的测试设备上重新安装了应用程序。
6. 关闭并重新打开了我的代码编辑器。
我使用以下版本：
Java: 11.0.12 React Native: 0.65 Android SDK: 30.0.2 npm: 6.14.4
这是我的完整 /android/app/build.gradle 文件：
根据调试和 RN 文档，需要在 /android/app/build.gradle 文件的 dependencies 中添加一些 implementation 代码行，但即使在清理 gradle（在/android文件夹中运行 ./gradlew clean）并删除 RN 应用程序的缓存（在项目根目录中运行 react-native start --reset-cache），我在应用程序中没有看到任何区别。
我已经尝试过很多方法，也进行了谷歌搜索。基于我的调试探险，我尝试了并仔细检查了这些建议，这些建议似乎适用于其他人，但对我来说并不起作用...
1. 我尝试了几个版本的 Fresco 库，似乎是必需的，并且还尝试将这些代码行放置在依赖项的底部和顶部。
2. 一些答案还建议在 android/app/proguard-rules.pro 中添加一行或多行代码，但这也没有改变任何东西。
3. 我在应用程序中以不同的方式使用 GIF，但它总是将宽度和高度包含在
4. 我已经尝试过来自不同 CDN 和域的 GIF-uri。
5. 在我的测试设备上重新安装了应用程序。
6. 关闭并重新打开了我的代码编辑器。
我使用以下版本：
Java: 11.0.12 React Native: 0.65 Android SDK: 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开发方面的经验更为丰富，所以很可能会错过一些东西:-)