如何使用 Expo EAS 为 React Native 中的 <Image> 组件启用动画 webp？

Question

当使用 Expo EAS 构建时，动画 gif 在 Android 中有效，但动画 webp (awebp) 无效。

为什么？
你如何让 webp 工作？

Answer 1

为什么 gif 动画能用却不能用？

React Native 有 animated image support for many formats 但它是可选的，需要内置。
默认情况下，Expo EAS 将它们全部构建在动画 webp 之外，因为...

It's disabled by default because RN doesn't really support animated webp on iOS. You have to use an external library to use it, like fast image. Expo tries to unify APIs, and if the behavior is that much different on iOS vs Android, it picks the default behavior that works for both.

Cedric (Expo team member) via Discord

如何启用

创建 EAS Config Plugin.
将插件文件添加到您的项目中。
在您的 eas 配置文件的 plugins 键中添加对该文件的引用。

这是配置插件。

// withAnimatedWebp.js

const { createRunOncePlugin, withGradleProperties } = require('@expo/config-plugins');

const withAnimatedWebp = (config) => {
  const itemToModify = {
    type: 'property',
    key: 'expo.webp.animated',
    value: 'true',
  };

  return withGradleProperties(config, (config) => {
    config.modResults = config.modResults.filter(
      (item) => !(item.type === itemToModify.type && item.key === itemToModify.key)
    );

    config.modResults.push(itemToModify);

    return config;
  });
};

module.exports = createRunOncePlugin(withAnimatedWebp, 'animated-webp-support', '1.0.0');

# inside app.config.json
plugins: ['./eas_build_config_plugins/withAnimatedWebp'],

_{感谢@wodin pointing me in the right direction on the Expo forums。}

Answer 2

我为 Expo 创建了一些 expo-config-plugins（一个基于你的工作），它启用了对 iOS 和 Android 的动画 webP 支持（与 <Image /> 和<FastImage />.

小心，它正在通过 expo（修补本机文件）使用危险的模组，之后一定要检查一切是否仍然运行顺利。遇到问题记得触发expo prebuild --clean

要点和进一步的文档

https://gist.github.com/Hirbod/07c6641970c9406ff35a7271dda1f01c

如何使用 Expo EAS 为 React Native 中的 <Image> 组件启用动画 webp？

How to enable animated webp for the <Image> component in React Native with Expo EAS?

react-native

expo

webp

要点和进一步的文档