javascript - React Native导入错误: unable to resolve module with . bin(如何导入某种类型的文件？)

Question

我在运行 React Native 应用程序时收到错误。

Unable to resolve "./tfjs_model_to_use_quantized/content/tfjs_model_to_use/group1-shard1of1.bin" from "components\ImageInput.js"

我正在尝试在 JS 代码中导入一个名为 group1-shardof1.bin 的文件。

其他 require 函数(例如，对于 json 文件)工作正常，并且该特定 require 函数的文件路径是正确的。我认为问题是 .bin 扩展名不支持在 React Native 中导出 代码:

const modelWeights = require('./tfjs_model_to_use_quantized/content/tfjs_model_to_use/group1-shard1of1.bin')

我尝试过，我添加了:

"packagerOpts": {
      "assetExts": ["bin", "pb", "txt"]
}

在我的 app.json 中，带有 bin 扩展名。

如何配置我的 React-Native 应用程序以便能够将 .bin 文件扩展名导入到 JS 文件中？如果有人能帮助我解决这个问题，那就太好了。

Answer 1

我找到了答案。可以在 Metro.config.js 中配置要由 React Native 解析的其他文件类型:

const blacklist = require('metro-config/src/defaults/blacklist');
module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
  resolver: {
    // (add 'bin' to assetExts)
    assetExts: ['bin', 'txt', 'jpg', 'png', 'ttf'],
    sourceExts: ['js', 'json', 'ts', 'tsx', 'jsx'],
    blacklistRE: blacklist([/platform_node/])
  },
};

关键部分是 assetExts 部分，将“bin”添加到列表中。在我的具体情况下，由于某种原因没有创建 Metro.config.js 文件，但我使用上述代码创建了一个新文件，并且 .bin 的导入工作正常。