为什么我的带有 nativewind 和 expo-router 的应用程序无法加载？

Question

我正在尝试启动我的应用程序，安装和配置expo-router和nativewind，但由于某种原因，自从我启动nativewind以来，我的应用程序无法加载，只是卡在启动屏幕上，没有错误或任何东西。

在我开始使用 Nativewind 安装过程之前，该应用程序运行良好。

我的应用程序结构

我的

package.json

：

{
  "name": "w-stickers",
  "version": "1.0.0",
  "main": "expo-router/entry",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@types/react": "~18.2.79",
    "expo": "~51.0.28",
    "expo-constants": "~16.0.2",
    "expo-dev-client": "~4.0.26",
    "expo-linking": "~6.3.1",
    "expo-router": "~3.5.23",
    "expo-splash-screen": "~0.27.5",
    "expo-status-bar": "~1.12.1",
    "nativewind": "^4.0.1",
    "react": "18.2.0",
    "react-native": "0.74.5",
    "react-native-reanimated": "~3.10.1",
    "react-native-safe-area-context": "4.10.5",
    "react-native-screens": "3.31.1",
    "tailwindcss": "^3.4.11"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "typescript": "^5.3.3"
  },
  "private": true
}

主布局（应用入口）：

import "../global.css";

import { useCallback, useEffect, useState } from "react";
import { View } from "react-native";
import { Stack } from "expo-router";
import * as SplashScreen from "expo-splash-screen";

SplashScreen.preventAutoHideAsync();

console.log("Layout");

const RootLayout = () => {
  const [appIsReady, setAppIsReady] = useState(false);

  useEffect(() => {
    const prepare = async () => {
      try {
        await new Promise((resolve) => setTimeout(resolve, 2000));
        console.log("Use Effect");
      } catch (e) {
        console.warn(e);
      } finally {
        setAppIsReady(true);
      }
    };

    prepare();
  }, []);

  const onLayoutRootView = useCallback(async () => {
    if (appIsReady) {
      await SplashScreen.hideAsync();
    }
  }, [appIsReady]);

  if (!appIsReady) {
    return null;
  }

  return (
    <View className="flex-1" onLayout={onLayoutRootView}>
      <Stack>
        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
      </Stack>
    </View>
  );
};

export default RootLayout;

global.css

：

@tailwind base;
@tailwind components;
@tailwind utilities;

metro.config.js

：

const { getDefaultConfig } = require("expo/metro-config");
const { withNativeWind } = require("nativewind/metro");

const config = getDefaultConfig(__dirname);

module.exports = withNativeWind(config, { input: "./global.css" });

babel.config.js

：

module.exports = function (api) {
  api.cache(true);
  return {
    presets: [["babel-preset-expo", { jsxImportSource: "nativewind" }], "nativewind/babel"],
  };
};

tailwind.config.js

：

/** @type {import('tailwindcss').Config} */
module.exports = {
  // NOTE: Update this to include the paths to all of your component files.
  content: ["./app/**/*.{js,jsx,ts,tsx}"],
  presets: [require("nativewind/preset")],
  theme: {
    extend: {},
  },
  plugins: [],
};

我尝试隐藏启动屏幕以查看发生了什么，但再次没有错误。我尝试卸载并重新安装依赖项，从头开始创建一个裸露的新项目，尝试了一些聊天 gpt 但没有任何结果。

我尝试在主要组件之前放置一个

console.log()

并且它会显示，但是当我在主要组件中放置一个

console.log()

时它不会显示。

我快要疯了，因为我已经尝试了好几个小时了，但我只是不知道自己做错了什么。

Answer 1

我也有同样的问题。现在就坚持使用 4.1.7 版本，因为 4.1.8（这是我撰写本文时的最新版本）在启动时完全冻结了应用程序，正如您所描述的那样。