3

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

我还尝试在浏览器中转到 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 无济于事

4

3 回答 3

2

尝试清理缓存并重试

rm -rf $TMPDIR/react-native-packager-cache-*
rm -rf $TMPDIR/metro-bundler-cache-* 
rm -rf $TMPDIR/haste-*;
yarn cache clean
于 2019-08-30T09:48:05.653 回答
0

请试试这个命令

npm cache clean
于 2019-08-30T09:50:33.757 回答
0

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

我不记得我是怎么想出来的，但是在我的提交消息中，这个问题出现在我的视线中，他们在评论中提到：

很快我们要强制所有监视文件夹位于 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为指向正确的目录以将其存档）

于 2020-03-31T04:24:30.913 回答