React Native读取yaml文件

Question

我想在React Native源代码中读取和解析静态的yaml资源文件（让我们从那里开始），我尝试使用require('path/to/file.yaml')，但无法成功。

我还尝试过使用npm的库，例如read-yaml或yaml-loader，但是这些库都无法正确地获取yaml内容。

对于json文件来说非常简单，我只需要`require('path/to/file.json')`就可以立即获得一个很好的对象格式。

有没有一种方法可以在React Native中读取yaml？它只是另一种不同格式的文本文件，因此我认为读取和解析yaml文件并不难，但我是从C/C++背景转来的JavaScript和React Native新手。

- Zennichimaro

Answer 1

由于似乎没有内置的yaml支持，我认为您需要使用类似react-native-fs或Expo FileSystem.readAsStringAsync（将文件视为资产）的东西。然后，您应该能够使用yaml-js等库来解析读取的字符串。

- Drew Goodwin

---

问题在于它在本地包中，但如果我使用 require(path/to/it) 或 include(path/to/it)，我永远不会拥有完整的内容（甚至不是字符串，只是一些奇怪的数字），而如果我使用 require(path/to/json')，我将拥有完整的 JSON 内容... - Zennichimaro

如答案所述，bundler没有内置对该类型的支持，因此require和include只会给你一个引用。当您需要JSON时，得到的不是字符串，而是一个JavaScript对象中评估过的JSON。如果有格式错误的JSON会发生什么？会出错。为了让它与YAML一起使用，它必须是受支持的类型，但事实并非如此。请检查我包含的链接，其中包括require或include文件。 - Drew Goodwin

Answer 2

你不能直接使用 require 加载 yaml。 如果你正在使用 Expo：

1. 使用一个 hook：

const [assets, assetsLoadError] = useAssets([
    require(uri)
]);

加载资源（如果没有上面的钩子，将无法正常工作）：

const loadedAsset = await Asset.loadAsync(
    require(uri)
);

3. 将文件读入字符串变量中：

let content;
try {
    content = await FileSystem.readAsStringAsync(
        loadedAsset.localUri
    );
} catch (e) {
    console.log({ e });
}

从字符串解析YAML，例如使用YAML npm包：

const parsedYAML = YAML.parse(content);

- FreeWorlder

Answer 3

首先安装：

npm install --save babel-plugin-content-transformer

然后将其添加到您的 Babel 配置中：

plugins: [
        [
            'content-transformer',
            {
                transformers: [
                    {
                        file: /\.ya?ml$/,
                        format: 'yaml',
                    },
                ],
            },
        ],
    ],

- R1'