React Native & Expo项目图片无法链接问题求助，疑涉Metro构建

我正在开发一款用于大学展示的瑜伽健身React Native应用，项目结构如下：

Fit/
├── screens/
│   ├── Login.js
│   ├── Signup.js
│   ├── Welcome.js
│   ├── onboarding.js
│   ├── home.js
│   ├── notifications.js
├── yoga_poses/
│   ├── Dhanur.js
│   ├── Pawan.js
│   ├── Shirsha.js
├── ayurvedic/
│   ├── Vaata.js
│   ├── Kapha.js
│   ├── Pitta.js
├── App.js

在yoga_poses/Dhanur.js文件中，我使用如下代码引入图片：

import React from 'react';
import { SafeAreaView, StyleSheet, Image, Text, TouchableOpacity, Linking} from 'react-native';

// Define the image using require('path_to_image')
const dhanur_pic = require('Fit/assets/dhanuraasana.jpg');

//rest of the code

注：yoga_poses文件夹下所有文件均存在相同问题，仅瑜伽姿势名称不同；ayurvedic文件夹下的文件也有同样问题。运行时抛出错误：

Unable to resolve "Fit/assets/dhanuraasana.jpg" from "yoga_poses/Dhanur.js"

我已确认文件及文件夹名称正确，尝试过各种相对和绝对路径写法，但问题仍未解决。请问这是否是Expo/Metro Builder的问题？若是，该如何修复？

这大概率是Metro打包器的路径解析规则问题，结合你的项目结构，按以下步骤排查修复：

1. 修正相对路径写法 #

你的assets文件夹应该在Fit根目录下，从yoga_poses/Dhanur.js出发，正确的相对路径需要向上退一级到根目录，再进入assets：

const dhanur_pic = require('../assets/dhanuraasana.jpg');

ayurvedic文件夹下的文件同理，路径改为../assets/xxx.jpg即可。

2. 配置Metro支持绝对路径（可选） #

如果不想频繁写相对路径，可通过配置让Metro支持绝对路径别名：

• 在项目根目录创建metro.config.js，添加内容：

const { getDefaultConfig } = require('expo/metro-config');

const config = getDefaultConfig(__dirname);
config.resolver.alias = {
  '@assets': './assets',
};

module.exports = config;

• 再在jsconfig.json（或tsconfig.json，若用TypeScript）中添加路径映射：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@assets/*": ["assets/*"]
    }
  }
}

之后就能用绝对路径引入图片：

const dhanur_pic = require('@assets/dhanuraasana.jpg');

3. 清除Metro缓存 #

缓存异常也会导致路径解析失败，执行命令清除缓存：

npx expo start --clear

4. 检查Expo资产配置 #

确保app.json或app.config.js中正确声明了资产目录：

{
  "expo": {
    "assets": ["./assets/"]
  }
}

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