问题描述

最近按照 React Native Upgrade Helper，将项目的 React Native 0.60.2 升级到 0.64.1，发现 Image 标签引入项目的图片出现致命错误： None of these files exist，没升级以前，一切正常。

button.js 文件的代码如下：

<Image source={require('./img/check.png')} />

项目的目录结构如下：

.
├── button.js
└── img
    ├── check@2x.android.png
    └── check@2x.ios.png

详细错误如下：

error: Error: Unable to resolve module ./check.png from button.js:

None of these files exist:
  * check.png
  * check.png/index(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
at ModuleResolver.resolveDependency (/Volumes/develop//node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:211:15)
at DependencyGraph.resolveDependency (/Volumes/develop//node_modules/metro/src/node-haste/DependencyGraph.js:413:43)
at Object.resolve (/Volumes/develop//node_modules/metro/src/lib/transformHelpers.js:317:42)
at resolve (/Volumes/develop//node_modules/metro/src/DeltaBundler/traverseDependencies.js:629:33)
at /Volumes/develop//node_modules/metro/src/DeltaBundler/traverseDependencies.js:645:26
at Array.reduce (<anonymous>)
at resolveDependencies (/Volumes/develop//node_modules/metro/src/DeltaBundler/traverseDependencies.js:644:33)
at /Volumes/develop//node_modules/metro/src/DeltaBundler/traverseDependencies.js:329:33
at Generator.next (<anonymous>)
at asyncGeneratorStep (/Volumes/develop//node_modules/metro/src/DeltaBundler/traverseDependencies.js:137:24)

解决方法

新版本的 Metro ，需要有默认的 check.png 文件。参考官方 Image 文档，如果需要根据不同平台显示不同的图片，可以增加 check.android.png 和 check.ios.png ，项目目录如下。

.
├── button.js
└── img
    ├── check.png
    ├── check.android.png
    ├── check.ios.png
    ├── check@2x.android.png
    └── check@2x.ios.png