React Native骰子应用图片模块解析失败：无法找到图片资源求助

问题描述 #

我正在开发一款简单的React Native骰子投掷应用，代码逻辑看似无误且已创建index.d.ts模块文件，但运行时出现如下错误：无法从路径C:\Users\Aditya\Desktop\New folder\rolldice\App.tsx解析../assets/one.png模块，系统提示one.png文件或../assets/one.png下的指定类型索引文件均不存在。

相关代码 #

import React, { useState } from 'react';
import type { PropsWithChildren } from 'react';

import { ImageSourcePropType, StyleSheet, View, Image, Pressable, Text } from 'react-native';

import DiceOne from '../assets/one.png'
import DiceTwo from '../assets/two.png'
import DiceThree from '../assets/three.png'
import DiceFour from '../assets/four.png'
import DiceFive from '../assets/five.png'
import DiceSix from '../assets/six.png'

type DiceProps = PropsWithChildren<{
  imageUrl: ImageSourcePropType
}>

const Dice = ({ imageUrl }: DiceProps): JSX.Element => {
  return (
    <View>
      <Image style={styles.diceImage} source={imageUrl} />
    </View>
  )
}

function App(): React.JSX.Element {

  const [diceImage, setDiceImage] = useState<ImageSourcePropType>(DiceOne)

  const rollDiceontap = () => {
    let randomNumber = Math.floor(Math.random() * 6) + 1;

    switch (randomNumber) {
      case 1:
        setDiceImage(DiceOne)
        break;
      case 2:
        setDiceImage(DiceTwo)
        break;
      case 3:
        setDiceImage(DiceThree)
        break;
      case 4:
        setDiceImage(DiceFour)
        break;
      case 5:
        setDiceImage(DiceFive)
        break;
      case 6:
        setDiceImage(DiceSix)
        break;

      default:
        setDiceImage(DiceOne)
        break;
    }
  }

  return (
    <View style={styles.container}>
      <Dice imageUrl={diceImage} />
      <Pressable onPress={rollDiceontap}>
        <Text style={styles.rollDiceBtnText}>
        Roll the dice
        </Text>
        
      </Pressable>
    </View>

  );
}

错误信息 #

error: Error: Unable to resolve module ../assets/one.png from C:\Users\Aditya\Desktop\New folder\rolldice\App.tsx:

None of these files exist:

one.png
..\assets\one.png\index(.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)

11 | import { ImageSourcePropType, StyleSheet, View, Image, Pressable, Text } from 'react-native';
  12 |
> 13 | import DiceOne from '../assets/one.png'
     |                      ^
  14 | import DiceTwo from '../assets/two.png'
  15 | import DiceThree from '../assets/three.png'
  16 | import DiceFour from '../assets/four.png"

解决办法 #

先确认文件路径与存在性

• 去C:\Users\Aditya\Desktop\New folder\rolldice目录下检查：是否有assets文件夹，里面是否确实存在one.png到six.png六张图。注意../assets是指App.tsx所在文件夹的上一级目录，要是App.tsx在src这类子文件夹里，路径得改成../../assets/one.png。
• 核对文件名大小写，别把one.png存成One.png——Windows系统不区分大小写，但React Native的模块解析严格认这个。

修正TypeScript声明文件

你创建的index.d.ts内容得准确，不然TypeScript无法识别图片模块。把下面这段代码放进声明文件（可放在项目根目录或assets文件夹内）：

declare module '*.png' {
  const value: import('react-native').ImageSourcePropType;
  export default value;
}

同时打开tsconfig.json，检查include数组里是否包含**/*.d.ts，没有的话就加上，确保TypeScript能读取到这个声明文件。

更换图片导入方式

React Native导入本地图片还有另一种写法，试试替换原来的import语句：

const DiceOne = require('../assets/one.png');
const DiceTwo = require('../assets/two.png');
// 其余四张图同理修改

或者直接在使用图片的地方用require，比如switch语句里写成setDiceImage(require('../assets/one.png'));，这种方式有时能绕开模块解析的问题。

清除缓存并重启项目

缓存问题也可能导致这个错误，先关闭当前的metro服务，再执行以下命令清除缓存：

npx react-native start --reset-cache

之后重新启动项目即可。

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