React Native 0.64.1 引用图片路径错误:None of these files exist
问题描述
最近按照 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