React Native 讀取 yaml 文件

Question

我想在我的 React Native 源代碼中讀取和解析一個靜態 yaml 資源文件（讓我們從那里開始），我嘗試require('path/to/file.yaml')無濟於事。

我還嘗試了 npm 的庫，例如read-yaml或yaml-loader ，所有這些庫都無法正確獲取 yaml 內容。

使用 json 文件輕而易舉，我只需 `require('path/to/file.json') 並立即以漂亮的對象格式獲取所有內容。

有沒有辦法在本機反應中讀取 yaml？ 它只是另一個格式不同的文本文件，所以我認為閱讀和解析 yaml 文件不會那么難。但是我是來自 C/C++ 背景的 JavaScript 和 React-Native 的新手

Answer 1

由於似乎沒有對 yaml 的內置支持，我相信您需要使用react-native-fs 之類的東西，或者在Expo FileSystem.readAsStringAsync中使用（將文件視為資產）。 然后，您應該能夠使用yaml-js之類的庫將字符串解析為已讀。

Answer 2

您不能直接使用 require 來加載 yaml。 如果您使用世博會：

1. 使用鈎子：

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

2. 加載資產（沒有上面的鈎子將無法工作）：

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

3. 將文件讀入字符串 var：

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

4. 從字符串解析 YAML，例如使用 YAML npm 包：

const parsedYAML = YAML.parse(content);

Answer 3

首先安裝npm install --save babel-plugin-content-transformer

然后添加到您的 babel 配置中：

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