React Native应用添加Image组件后遇Unable to resolve module错误求助

问题场景 #

我在开发一款React Native（Expo）应用，原本代码运行正常，但在View和Text之间添加<Image source={abacatezinImg} />后，出现错误：Unable to resolve module ..assets/abacatezin.png。已尝试修改package.json但未解决问题。

原正常运行代码：

import React from 'react';
import { View, Text, Image } from 'react-native';

import abacatezinImg from '..assets/abacatezin.png'

export function LoginScreen(){
    return(
        <View>
  
            <Text>
                Faça seu login para começar
            </Text>
        </View>
    )
}

项目package.json内容：

{
  "name": "timer_vovojuju",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "expo": "~47.0.9",
    "expo-status-bar": "~1.4.2",
    "react": "18.1.0",
    "react-dom": "18.1.0",
    "react-native": "0.70.5",
    "react-native-web": "~0.18.9"
    
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@types/react": "~18.0.14",
    "@types/react-native": "~0.70.6",
    "typescript": "^4.6.3"
  },
  "private": true
}

解决方案 #

• 修正路径拼写错误
  导入路径..assets/abacatezin.png缺少斜杠，正确的相对路径应为../assets/abacatezin.png。../是标准的相对路径写法，表示跳转至上一级目录，少斜杠会被解析为无效模块名。

• 确认文件实际位置
  检查abacatezin.png是否确实存在于当前文件所在目录的上一级assets文件夹中。例如，若LoginScreen.tsx在src/screens/目录下，assets文件夹需位于src/目录下，才能匹配../assets/abacatezin.png路径。

• 清除Expo缓存
  缓存可能导致路径解析异常，执行以下命令清除缓存后重启项目：

  expo start -c
  

• 改用Expo推荐的图片引用方式
  在Expo项目中，可直接用require引用图片，无需提前导入变量，避免路径导入问题：

  <Image source={require('../assets/abacatezin.png')} />
  

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