如何将静态 YAML 文件与 React Native 应用程序捆绑在一起?

Posted

技术标签:

【中文标题】如何将静态 YAML 文件与 React Native 应用程序捆绑在一起?【英文标题】:How to bundle a static YAML file with a React Native app? 【发布时间】:2019-10-15 23:55:16 【问题描述】:

我想将我的 React Native 应用与一些静态资产一起发布,例如图像、音频文件和一个 YAML 文件。

图片可以自动绑定为described here:

<Image source=require('./my-icon.png') />

现在我正在尝试对 YAML 文件做同样的事情。这似乎有效:

let yamlContent = require('../data/content.yaml');

但是,在 android 模拟器中运行它时,我得到一个错误:

error: bundling failed: Error: Unable to resolve module `../content.yaml` from 
`C:\Users\....\path\to\loader.ts`: 
The module `../content.yaml` could not be found from 
`C:\Users\....\path\to\loader.ts`. Indeed, none of these files exist:
  * `C:\Users\....\path\to\data\content.yaml(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`
  * `C:\Users\....\path\to\content.yaml\index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`

我仔细检查了输出中的路径,文件确实存在。

如何在 React Native 中读取静态 YAML 文件?

我还在 Node.js 控制台应用程序中尝试了在 React Native 之外的相同代码。在这种情况下,文件似乎已被读取(如果 YAML 格式错误,我会收到错误消息)。但是,yamlContent 对象始终是一个空的 javascript 对象。

【问题讨论】:

你找到解决方案了吗? @Zennichimaro 不是。我们正在将 yaml 文件转换为 json,然后将 json 文件打包。 我已经找到了很多更新 webpack.config.js 文件的信息,但涉及到首先弹出 react 应用程序:github.com/joepagan/js-yaml-loader-test 【参考方案1】:

关闭 'packager' 并删除 node_modules 文件夹。

然后使用 npm install 命令重新安装所有软件包

【讨论】:

试过了,但同样的问题。如果我尝试使用content.json 而不是content.yaml,一切正常。

以上是关于如何将静态 YAML 文件与 React Native 应用程序捆绑在一起?的主要内容,如果未能解决你的问题,请参考以下文章

[技术博客]react native事件监听与原生通信——实现对通知消息的响应

如何使用 app.yaml 在 GAE(python) 中上传静态文件?

用于上传静态文件的 app.yaml 设置

SyntaxError - node_modules/react-native/Libraries/polyfills/error-guard.js:缺少分号。 (14:4) 在 react nati

使用 Google App Engine 将所有请求从一个域重定向到另一个域,但在 yaml 中保留静态路由规则

如何将 react-native 从 0.56.0 降级到 0.55.4 版本?