如何在 React Native Fast Image 中启用动画 webp (awebp)？

Question

我们使用默认的 <Image> 组件。

我们希望从 react-native-fast-image 中内置的一些缓存功能中受益。但是，它适用于除了 awebp 文件之外的所有内容；我们有很多。

the github issues 中有很多解决方案，但我们无法使它们中的任何一个起作用。

是否有经过验证的方法让 awebp 正常工作？

Answer 1

我已经为 Expo 创建了一些配置插件（一个基于您的工作）可能会有帮助：

使用 FastImage 添加对动画 webP 的支持非常简单。配置插件仅在 AppDelegate.m 内添加 3 行代码，在 android/app/build.gradle

内添加一行实现

这就是 FastImage 对动画 webp 的支持。

长话短说：

Android: 将以下内容添加到您的 android/app/build.gradle

implementation "com.github.zjupure:webpdecoder:2.0.4.12.0

iOS：打开您的 AppDelegate.m 并在第一个 AppDelegate.h 导入后立即添加以下内容：

#import "SDImageCodersManager.h"
#import <SDWebImageWebPCoder/SDImageWebPCoder.h>

向下滚动一点（同一个文件）直到找到这个启动标识符：

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

并在 {:

之后添加以下内容

[SDImageCodersManager.sharedManager addCoder: SDImageWebPCoder.sharedCoder];

就是这样。重建你的项目（re-运行 gradlew）并且你有 FastImage 动画 webP 支持。

P.S：当您需要 Android 上的 APNG + 动画 webP 支持时，请改为添加此实现：

 implementation 'com.github.penfeizhou.android.animation:glide-plugin:2.17.0'

How to enable animated webp (awebp) in React Native Fast Image?