Question

Metro捆绑器可以解析依赖关系图（该应用程序在模拟器中启动），但是无法解析任何资产，因此该应用程序中的所有图像都丢失了。

仅当我从react-native@0.57升级到0.59后，才会发生此问题

Looking for JS files in
   /Users/name/app/MyApp/artifacts
   /Users/name/app/MyApp/node_modules

warning: the transform cache was reset.
Loading dependency graph, done.
 DELTA  [android, dev] artifacts/index.js ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ 100.0% (2921/2921), done.

 MAP  [android, dev] artifacts/index.js ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ 100.0% (1/1), done.


::ffff:127.0.0.1 - - [30/Aug/2019:06:27:17 +0000] "GET /node_modules/my-assets/artifacts/assets/images/Logo.png?platform=android&hash=someHash HTTP/1.1" 404 221 "-" "okhttp/3.12.1"

导航到包含<Image source=... />

的任何视图时，出现

^^^问题

模块my-assets确实存在，并且包含所有需要的资产

要开始：node node_modules/react-native/local-cli/cli.js start --reset-cache --projectRoot artifacts

artifacts包含来自.js的转译的.ts代码

我的文件结构如下

. ├── artifacts # transpiled js files ├── node_modules #npm modules └── src # ts files

捆绑服务器的输出

metro.config.js

module.exports = { watchFolders: [path.join(__dirname, 'node_modules')], transformer: { getTransformOptions: async () => ({ transform: { experimentalImportSupport: false, inlineRequires: false } }) }, resolver: { blacklistRE: blacklist([ /node_modules\/.*\/node_modules\/react-native\/.*/]), assetRegistryPath: path.resolve('node_modules/react-native/Libraries/Image/AssetRegistry') } }

依赖性：

my-app@1.0 /Users/name/app/MyApp ├── metro@0.48.5 extraneous └─┬ react-native@0.59.4 └─┬ @react-native-community/cli@1.11.2 ├── metro@0.51.1 └─┬ metro-config@0.51.1 └── metro@0.51.1 deduped

我也尝试在浏览器中使用goto url，但对于以下两个请求也都使用了404

http://localhost:8081/node_modules/my-assets/artifacts/assets/images/Logo.png?platform=android&hash=someHash http://localhost:8081/node_modules/metro/src/Bundler/util.js # request to any js file also return 404

-更新-

清理缓存并删除$ TMPDIR没有帮助

Answer 1

尝试清理缓存，然后重试

rm -rf $TMPDIR/react-native-packager-cache-*
rm -rf $TMPDIR/metro-bundler-cache-* 
rm -rf $TMPDIR/haste-*;
yarn cache clean

Answer 2

请尝试使用此命令

npm cache clean

Answer 3

我看到通知，然后意识到我之前曾问过这个问题

我不记得我是怎么想出来的，但是在我的提交消息中，我看到了这个issue，他们在comment上提到了：

很快，我们希望强制所有监视文件夹都位于Metro的项目根目录内，这样Metro可以安全地将项目根目录用作提供资产的http服务器的根目录，这将解决此问题

要解决这个问题，我必须将文件结构从

更改为

.
├── artifacts
├── node_modules
├── package.json
├── src
│   ├── index.ts

收件人：

.
├── artifacts
├── index.js # added this root level entry file
├── node_modules
├── src
│   ├── index.ts

新添加的index.js中只有require('./artifacts/index.js')，它是Metro的入口文件。然后使用.从npx react-native start --skipflow --reset-cache启动服务器，以确保所有内容都在根目录内。

（如OP中所述，我们使用node node_modules/react-native/local-cli/cli.js start --reset-cache --projectRoot artifacts启动Metro服务器，因此您可以将--projectRoot更改为指向适当的目录以进行存档）

React-Native Metro捆绑器无法提供任何文件

3 个答案: