我正在努力让我的GIF在我的RN应用程序的Android版本上动画化。iOS版本正如预期的那样动画化循环的GIF,但我只看到Android设备上GIF的一个卡住的“单帧”图像。
根据调试和RN文档,需要将几行implementation
添加到 /android/app/build.gradle 中的dependencies
,但即使在清理gradle(在 /android 文件夹中运行./gradlew clean
)并删除RN应用的该高速缓存(在项目根文件夹中运行react-native start --reset-cache
)之后,我也没有看到应用中有任何差异。
我已经在谷歌上搜索并尝试了很多。基于我的调试冒险,我已经尝试并仔细检查了这些建议,这似乎对其他人有用,但对我似乎不起作用...
- 我已经尝试了几个版本的壁画库,似乎是必需的,我也尝试了把线在底部和顶部的
dependencies
。 - 有些答案还建议向 *android/app/ www.example.com * 添加一行或多行代码proguard-rules.pro,但这也不会改变任何东西。
- 我在我的应用程序中以不同的方式使用GIF,但它总是将
width
和height
包含在<Image />
的style
属性中。 - 我尝试过使用来自不同CDN和域的GIF URI。
- 已在我的测试设备上重新安装应用程序。
- 关闭并重新打开代码编辑器。
我正在使用以下版本:
- Java语言版本:11.0.12
- React Native :0.65
- Android软件开发工具包:30.0.2
- 国家预防措施: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开发,所以很可能我错过了一些东西:-)
6条答案
按热度按时间ycggw6v21#
我在使用react-native 0.66.3时遇到了同样的问题,在
app/build.gradle
中将com.facebook.fresco:animated-gif
更新为2.6.0
对我来说很有效hmae6n7t2#
一个更简单的解决办法是使用FastImage库,它内置了Gif支持,并具有缓存等更多优点
mw3dktmi3#
Android上的GIF和WebP支持
构建自己的本地代码时,默认情况下Android不支持GIF和WebP。
您需要在android/app/build.gradle中添加一些可选模块,具体取决于您的应用需求。
您可以按照官方文档链接
mrphzbgm4#
我自己在android上也遇到过GIF的问题,最后转向了动画webp,谷歌似乎很喜欢它,甚至有自己的转换工具。他们已经支持android很多年了,似乎工作得更稳定。甚至可以把扩展名改为webp而不是PNG?
https://frescolib.org/docs/webp-support.html
vsdwdz235#
How do I display an animated gif in React Native?
将
android/app/build.gradle
相加ffscu2ro6#
你只需要React Native快速图像库。
〈快速图像源={{ uri:img,//标题:{授权:'someAuthToken' },优先级:如果您的文件不存在,请点击这里返回上一页。'100%',高度:“100%”,
enter code here
边界半径:10、}} /〉