解决React Native中NativeWind和react-native-dotenv冲突的问题
P粉135799949
P粉135799949 2024-03-29 20:48:45
0
1
515

我是 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 ,但也没有运气。

P粉135799949
P粉135799949

全部回复(1)
P粉766520991

我曾经遇到过类似的问题,可能的解决方案之一是不使用 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",
          },
        },
      ],
    ],
  };

祝你好运~

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板