如何为 <Image> 启用动画 webp带有 Expo EAS 的 React Native 中的组件? [英] How to enable animated webp for the <Image> component in React Native with Expo EAS?

问题描述

使用 Expo EAS 构建时，动画 gif 在 Android 中有效，但动画 webp (awebp) 不支持.

Animated gifs work in Android when using Expo EAS builds but animated webp (awebp) do not.

为什么?
你如何让 awebp 工作?

Why?
How do you get awebp working?

推荐答案

为什么 gif 动画就不行了?

Why doesn't it work when animated gif does?

• React Native 动画图像支持多种格式 但它是可选的，需要内置.
• 默认情况下，Expo EAS 将它们全部构建在除了动画 webp 之外，因为...

• React Native has animated image support for many formats but it's optional and needs to be built in.
• By default Expo EAS builds them all in except animated webp because...

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

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(世博会团队成员)通过 Discord

如何启用

• 创建一个EAS 配置插件.李>
• 将插件文件添加到您的项目中.
• 在您的 eas 配置文件的 plugins 键中添加对该文件的引用.

• Create an EAS Config Plugin.
• Add the plugin file to your project.
• Add a reference to the file in the plugins key of your eas config file.

这是配置插件.

// 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 在世博论坛上为我指明正确的方向.}

这篇关于如何为 <Image> 启用动画 webp带有 Expo EAS 的 React Native 中的组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！