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

Question

我们的动画 webp 文件在使用默认<Image>组件的 React Native 应用程序中运行良好。

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

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];

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

PS：当您需要 Android 上的 APNG + 动画 webP 支持时，请添加此实现：

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