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

使用 Expo EAS 构建时，动画 gif 在 Android 中可以工作，但动画 webp (awebp) 则不能。

Why?
如何让 awebp 工作？

为什么 gif 动画可以用，但它却不起作用？

• React Native 有动画图像支持多种格式 https://reactnative.dev/docs/image#gif-and-webp-support-on-android但它是可选的并且需要内置。
• 默认情况下，Expo EAS 将它们全部构建在动画 webp 之外，因为……

默认情况下它是禁用的，因为 RN 并不真正支持 iOS 上的动画 webp。您必须使用外部库才能使用它，例如快速图像。 Expo 尝试统一 API，如果 iOS 和 Android 上的行为差异很大，它会选择适用于两者的默认行为。

Cedric（世博会团队成员）来自 Discord

如何启用

• 创建一个EAS 配置插件 https://docs.expo.dev/guides/config-plugins/#what-are-plugins.
• 将插件文件添加到您的项目中。
• 添加对文件的引用pluginseas 配置文件的密钥。

这是配置插件。

// 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'],

_{Credit to @wodin for pointing me in the right direction on the Expo forums https://forums.expo.dev/t/animated-webp-expected-to-work-with-eas-builds/58960/5.}