React Native中如何使用.avif图片？TypeScript项目适配方法

1. React Native默认是否支持AVIF格式？ #

React Native原生默认不支持AVIF格式，官方内置支持的图片格式仅包括PNG、JPG/JPEG、WebP（Android 9+原生支持，iOS 14+需额外配置）、GIF、BMP等。直接引入AVIF图片会触发模块解析错误，这就是你遇到问题的核心原因。

2. TypeScript项目中如何使用AVIF图片？ #

要在RN的TS项目中使用AVIF，需要借助第三方库实现支持，以下是具体可行方案：

方法一：使用react-native-avif库（推荐） #

• 安装依赖：

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

  RN 0.60+版本会自动完成链接，无需手动操作。

• 配置TypeScript类型声明：
  在项目根目录创建typings/images.d.ts（或在已有的global.d.ts中添加），写入以下内容：

  declare module '*.avif' {
    const value: number;
    export default value;
  }
  

  这样TS就能识别AVIF模块，不会再报类型错误。

• 在组件中使用：

  import AvifImg from './assets/your-image.avif';
  import { Image } from 'react-native';
  
  export default function App() {
    return (
      <Image source={AvifImg} style={{ width: 200, height: 200 }} />
    );
  }
  

方法二：使用react-native-fast-image（部分版本支持AVIF） #

如果你的项目已经在用react-native-fast-image，可先确认其版本是否支持AVIF（需查阅对应版本文档），使用方式如下：

• 安装依赖后，用FastImage替代原生Image组件：

  import FastImage from 'react-native-fast-image';
  import AvifImg from './assets/your-image.avif';
  
  export default function App() {
    return (
      <FastImage source={AvifImg} style={{ width: 200, height: 200 }} />
    );
  }
  

  同样需要配置上述的TS类型声明。

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