React Native安卓端无法显示AVIF图片问题求助

问题原因 #

React Native安卓端默认的Image组件不支持AVIF格式解码：

• Web端浏览器已普遍支持AVIF，所以显示正常；
• 安卓原生系统（Android 12以下无内置AVIF解码支持，即使Android 12+，React Native默认Image组件也未适配该特性），导致AVIF图片显示空白。

解决方案 #

方案一：使用第三方AVIF图片组件 #

使用专门支持AVIF的react-native-avif-image组件，步骤如下：

1. 安装依赖：

npm install react-native-avif-image
# 或
yarn add react-native-avif-image

2. 替换原有Image组件：

import AvifImage from 'react-native-avif-image';

const imageSrc = "https://grocer-img.sgp1.cdn.digitaloceanspaces.com/products/4781330397012883.avif";

// 渲染组件
<AvifImage
  source={{ uri: imageSrc }}
  style={styles.productImage}
  resizeMethod="resize"
/>

如果项目中同时存在其他格式图片，可以通过判断后缀名，动态选择使用原生Image或AvifImage。

方案二：客户端转换图片格式（备选） #

通过图片处理库将AVIF转换为安卓支持的JPG/PNG格式，适合无法修改服务端的场景：

1. 安装依赖：

npm install @react-native-community/image-manipulator
# 或
yarn add @react-native-community/image-manipulator

2. 实现转换逻辑：

import { Image, Platform, useEffect, useState } from 'react-native';
import ImageManipulator from '@react-native-community/image-manipulator';

const imageSrc = "https://grocer-img.sgp1.cdn.digitaloceanspaces.com/products/4781330397012883.avif";

const loadConvertedImage = async (uri) => {
  if (Platform.OS !== 'android') return uri;
  try {
    const result = await ImageManipulator.manipulateAsync(
      uri,
      [],
      { format: 'jpg', quality: 0.8 }
    );
    return result.uri;
  } catch (err) {
    console.error('图片转换失败:', err);
    return uri;
  }
};

// 组件内使用
const [displaySrc, setDisplaySrc] = useState(null);

useEffect(() => {
  loadConvertedImage(imageSrc).then(setDisplaySrc);
}, [imageSrc]);

return displaySrc ? (
  <Image source={{ uri: displaySrc }} style={styles.productImage} />
) : null;

注意：该方法会增加图片加载耗时，仅建议用于非核心场景。

方案三：服务端提供多格式图片（最优解） #

在服务端存储同一图片的AVIF和JPG/PNG版本，客户端根据平台选择对应格式：

import { Image, Platform } from 'react-native';

const getPlatformImageSrc = (avifUri) => {
  return Platform.OS === 'android' 
    ? avifUri.replace('.avif', '.jpg') // 替换为服务端存在的JPG地址
    : avifUri;
};

const imageSrc = getPlatformImageSrc("https://grocer-img.sgp1.cdn.digitaloceanspaces.com/products/4781330397012883.avif");

<Image source={{ uri: imageSrc }} style={styles.productImage} />

该方案无客户端性能损耗，兼容性最佳，前提是服务端能提供对应格式的图片资源。

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