解決React Native中NativeWind和react-native-dotenv衝突的問題

Question

我是 React Native 新手，正在使用 Tailwind CSS 並嘗試實作 React-native-dotenv。

我已經安裝了 NativeWind 和 Tailwind（因為我相信你需要兩者），它們一直在工作，直到我嘗試實作react-native-dotenv。

當我將 babel.config.js 更新為以下內容時，出現問題：

module.exports = function (api) {
  api.cache(true);

  const presets = ["babel-preset-expo"];
  const plugins = [
    "nativewind/babel",
    [
      "module:react-native-dotenv",
      {
        moduleName: "@env",
        path: ".env",
      },
    ],
  ];
  return { presets, plugins };
};

在外掛程式內...

如果我刪除 nativewind/babel，該項目將載入 expo 並按預期工作（無樣式）。

如果我刪除 "module:react-native-dotenv...，該項目會載入 expo 並按預期樣式工作，但沒有 Dotenv 功能。

當我將這兩個插件一起包含在 babel.config.js 檔案中時，它在控制台中顯示此錯誤：

未捕獲類型錯誤：nativewind__WEBPACK_IMPORTED_MODULE_0__.NativeWindStyleSheet 未定義 jsunitlessNumbers.js：76 網頁包 48 unitlessNumbers.js:76"

我還嘗試將插件分離到不同的檔案中，然後將它們重新匯入到 babel.config.js 中，但沒有成功。

我使用了 .babelrc 檔案以及 babel.config.js ，但也沒有運氣。

Answer 1

我曾經遇到過類似的問題，可能的解決方案之一是不使用module:react-native-dotenv 插件，您可以嘗試使用babel-plugin-module-resolver 套件來解析 的路徑.env 文件，.

您可以在 babel.config.js 檔案中執行此操作：

return {
    presets: ["babel-preset-expo"],
    plugins: [
      "nativewind/babel",
      [
        "module-resolver",
        {
          alias: {
            "@env": "./.env",
          },
        },
      ],
    ],
  };

祝你好運~