如何在React Native Fast Image中启用动效webp（awebp）格式支持

Android 端配置 #

• 在android/app/build.gradle的dependencies块中添加glide官方webp动画支持依赖，版本号需要和react-native-fast-image内置的glide版本匹配，以下为通用兼容版本配置：

implementation "com.github.bumptech.glide:glide:4.13.2"
implementation "com.github.bumptech.glide:webpdecoder:4.13.2"
annotationProcessor "com.github.bumptech.glide:compiler:4.13.2"

• 修改node_modules/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageGlideModule.java的registerComponents方法，新增WebP动图解码注册逻辑，修改后代码如下：

@Override
public void registerComponents(@NonNull Context context, @NonNull Glide glide, @NonNull Registry registry) {
    super.registerComponents(context, glide, registry);
    // 新增WebP动图支持
    registry.prepend(InputStream.class, WebpDrawable.class, new WebpDecoderResourceDecoder(context.getResources()));
    registry.append(WebpDrawable.class, new WebpDrawableEncoder());
}

• 执行cd android && ./gradlew clean清理安卓构建缓存，之后重新打包运行即可。

iOS 端配置 #

• 修改项目ios目录下的Podfile，新增SDWebImage的WebP动图解码子库依赖：

pod 'SDWebImageWebPCoder', :modular_headers => true

• 打开ios/[你的项目名]/AppDelegate.mm（或AppDelegate.m），在didFinishLaunchingWithOptions方法最开头添加编码器注册代码：

#import <SDWebImageWebPCoder/SDImageWebPCoder.h>

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // 新增以下行，放到方法最开头
    [SDImageCodersManager.sharedManager addCoder:SDImageWebPCoder.sharedCoder];
    // 原有代码保留
    // ...
}

• 执行cd ios && pod deintegrate && pod install重新安装iOS依赖，清理Xcode缓存后编译运行即可。

调用注意事项 #

• 使用FastImage加载awebp资源时，不要开启staticOnly属性，该属性会强制解码器只返回静态第一帧。
• 优先使用远程资源测试，本地awebp资源需要确认已经正确放置到对应平台的资源目录下。

内容的提问来源于stack exchange，提问作者GollyJer