Expo&Tamagui开发导入图片，遇@react-native/assets-registry/registry解析错误

云原生阿岚

2026-6-28

解决Expo + Tamagui项目本地图片导入错误

问题原因

出现Unable to resolve "@react-native/assets-registry/registry"错误，核心是Metro未配置Tamagui所需的资产处理规则，导致图片解析时找不到对应注册表模块。

解决方案

1. 安装Tamagui Metro插件

Tamagui需要专属插件处理资产，先安装依赖：

npm install @tamagui/metro-plugin --save-dev

2. 更新Metro配置

修改metro.config.js，引入Tamagui插件并调整配置：

const { getDefaultConfig } = require('expo/metro-config');
const { withTamagui } = require('@tamagui/metro-plugin');

const config = getDefaultConfig(__dirname);

module.exports = withTamagui(config, {
  components: ['tamagui'],
  config: './tamagui.config.ts',
  outputCSS: './tamagui-web.css',
});

注意：项目根目录需存在tamagui.config.ts（或.js）配置文件，若没有可运行npx tamagui init生成。

3. 调整图片导入方式

改用ES模块导入替代require，适配Expo资产处理规范：

import { View, Image } from 'tamagui';
import logoImg from '../assets/image.png';

export default function Page() {
  return (
    <View>
      <Image source={logoImg} />
    </View>
  )
}