React Native 0.64.1 引用图片路径错误:None of these files exist

React Native 2021-05-21 阅读 166 评论 0

问题描述

最近按照 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.pngcheck.ios.png ,项目目录如下。

.
├── button.js
└── img
    ├── check.png
    ├── check.android.png
    ├── check.ios.png
    ├── check@2x.android.png
    └── check@2x.ios.png
最后更新 2021-05-23