使用自定义扩展加载资产不起作用

IT技术 reactjs react-native expo
2021-04-20 07:32:16

我正在尝试在 react-native 中实现我的第一个应用程序，我需要从保存在我的项目文件夹中的静态文件中打开数据库。

我读到我需要允许从资产加载自定义扩展文件，所以我将以下片段添加到我的app.json文件中：

"packagerOpts": {
    "assetExts": ["sqlite", "db"]
},

接下来，我尝试在我的 App.js 组件中使用 .sqlite 或 .db 扩展名导入这个静态文件componentDidMount()：

componentDidMount = async () => {
  await Expo.FileSystem.downloadAsync(
    Expo.Asset.fromModule(require("./assets/db/local.db")).uri,
    `${Expo.FileSystem.documentDirectory}SQLite/local.db`
  );

  SQLite.openDatabase("local.db");
};

但世博会建设者一直在说Unable to resolve "./assets/db/local.db" from "App.js"。请问有什么建议吗？

4个回答

以下代码来自上面的 2 个答案

在项目根目录创建metro.config.js：

const defaultAssetExts = require("metro-config/src/defaults/defaults").assetExts;

module.exports = {
  resolver: {
    assetExts: [
      ...defaultAssetExts,
      // 3D Model formats
      "dae",
      "obj",
      "mtl",
      // sqlite format
      "db",
      "sqlite"
    ]
  }
};

可选择安装metro-dependency： npm i metro-config --save-dev

这在我的环境中不起作用：“metro-config”：“latest”，“react”：“16.8.6”，“react-native”：“0.60.5”，
2021-06-01 07:32:16

去 node_modules Metro-config defaults.js 广告扩展类型到 assetExts 部分完成~

如果您重新安装并node_modules重新创建文件夹 refreshes/会发生什么...
2021-06-15 07:32:16

我发现世博会存在某种错误，但已为此提出/批准了公关。对于那些迫不及待地等待官方错误修复的人，还有一个解决方法：

使用 assetExts 创建一个 Metro.config.js 文件为我解决了这个问题：

module.exports = {
  resolver: {
    assetExts: ["db", "mp3", "ttf"]
  }
}

并导入这个文件让我们在你的 App.js 中说？我现在可以从文件中打开 SQLite 数据库。

嗨@sebinq：你有完整的代码库吗？
2021-05-29 07:32:16

在 Expo 40 - 这就是我如何让它运行的方式！ 世博网站源码。

请注意，您必须将文件放在assets目录中，并确保您app.json指定了所有需要的扩展名，我的包括所有内容："assetBundlePatterns": ["**/*"],

首先，我将把它分成两部分——让 Expo 工作，然后让 typescript 工作。

Expo 很简单，但只有一次我意识到这是问题所在。我遵循了上述指南。总之：

  1. expo install @expo/metro-config
  2. 创建一个metro.config.js并push使用您尝试添加的任何扩展名调用该方法，在我的情况下它是md（降价）：
const { getDefaultConfig } = require('@expo/metro-config');

const defaultConfig = getDefaultConfig(__dirname);

defaultConfig.resolver.assetExts.push('md');

module.exports = defaultConfig;
  1. 在 expo 上重置缓存（在 Mac 上运行它的终端窗口中的 shift + r）

typescript (4) 有更多记录，但我做到了：

  1. 创建一个声明 ( *.d.ts) 文件，将 markdown 指定为有效的扩展名。
  2. 确保该文件在我的tsconfig.json,"include"目录之一中
  3. 该文件添加到typeRoot下compilationOptions在tsconfig.json
  4. md在我的组件中导入/要求

对我来说，这些步骤是：

  1. 添加文件 ./app/declaration.d.ts
  2. 我"include"的app目录中有它，看起来像这样： "include": ["App.js", "app", "test", "storybook"]
  3. 我将此添加到compilationOptions："typeRoots":["./app/declaration.d.ts"],
  4. import newborn from './../../../assets/resources/MY_MD_DOC.md'

多田！

其它你可能感兴趣的问题
上一篇React hooks 真的必须从“使用”开始吗？ 下一篇用于历史推送的 React Hooks 中等效的构造函数props