Expo Router(SDK50)集成NativeWind V4遇Reanimated初始化失败问题

问题诊断 #

出现的[Reanimated] Native part of Reanimated doesn't seem to be initialized和Invariant Violation: "main" has not been registered错误，核心原因是Reanimated原生模块未正确集成，或NativeWind与Expo Router的配置冲突导致应用入口注册失败。

解决方案 #

1. 调整Babel配置顺序

Reanimated插件必须放在所有插件的最后，且NativeWind预设位置需正确：

module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
      "nativewind/babel"
    ],
    plugins: [
      // 确保此插件在最后
      "react-native-reanimated/plugin"
    ]
  };
};

2. 更新Metro配置以支持Reanimated

添加Reanimated所需的资源扩展名处理：

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

const config = getDefaultConfig(__dirname);

// 加入Reanimated支持
config.resolver.assetExts.push("bin");
config.resolver.sourceExts.push("cjs");

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

3. 提前初始化Reanimated

在app/_layout.js的最顶部导入Reanimated，确保原生模块提前加载：

// 所有导入前先加载Reanimated
import "react-native-reanimated";

import FontAwesome from "@expo/vector-icons/FontAwesome";
import { useFonts } from "expo-font";
import { Stack } from "expo-router";
import * as SplashScreen from "expo-splash-screen";
import { useEffect } from "react";
import "../global.css";

// 原有代码...

4. 彻底清理缓存并重建项目

执行以下命令完全重置项目环境：

# 清除Expo Metro缓存
npx expo start --clear

# 可选：重置依赖（若问题仍存在）
rm -rf node_modules package-lock.json
npm install

# 重新构建原生项目
npx expo run:android --clean  # Android平台
# 或
npx expo run:ios --clean      # iOS平台

5. 验证Global.css配置

确保global.css位于项目根目录，且包含Tailwind核心指令：

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

6. 确认入口配置

检查package.json中的main字段是否正确：

"main": "expo-router/entry"

内容的提问来源于stack exchange，提问作者MattBurrow