Lösen Sie den Konflikt zwischen NativeWind und React-Native-Dotenv in React Native

Question

Ich bin neu bei React Native und verwende Tailwind CSS und versuche, React-native-dotenv zu implementieren.

Ich habe NativeWind und Tailwind installiert (da ich glaube, dass Sie beide benötigen) und sie funktionierten, bis ich versuchte, React-Native-Dotenv zu implementieren.

Das Problem tritt auf, wenn ich babel.config.js auf

aktualisiere

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 };
};

Im Plugin...

Wenn ich nativewind/babel entferne, lädt das Projekt expo und funktioniert wie erwartet (keine Stile).

Wenn ich "module:react-native-dotenv... entferne, lädt das Projekt expo und funktioniert wie erwartet, jedoch ohne die Dotenv-Funktionalität.

Wenn ich diese beiden Plugins zusammen in die babel.config.js-Datei einfüge, wird in der Konsole dieser Fehler angezeigt:

Uncaught TypeError: nativewind__WEBPACK_IMPORTED_MODULE_0__.NativeWindStyleSheet ist nicht definiert jsunitlessNumbers.js: 76 Webpack 48 unitlessNumbers.js:76"

Ich habe auch versucht, die Plugins in verschiedene Dateien aufzuteilen und sie erneut in babel.config.js zu importieren, ohne Erfolg.

Ich habe die Datei .babelrc zusammen mit .babelrc 文件以及 babel.config.js verwendet, aber auch kein Glück.

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",
          },
        },
      ],
    ],
  };

祝你好运~