Expo 搭配 Nativewind v4 样式未生效问题求助

我已严格按照官方文档完成所有配置，但样式仍然未生效。另外添加metro.config.js后尝试使用v2版本时，系统提示需要更新SDK。以下是我的配置文件：

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: [],
}

babel.config.js #

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

注：原代码缺少闭合的}，需补充完整，否则会导致Babel配置失效，这可能是样式不生效的核心原因之一

_layout.jsx #

import { StyleSheet, Text, View } from 'react-native'
import React from 'react'
import { Slot } from 'expo-router'

export default function _layout() {
  return (
   <>
   <Slot/>
   </>
  )
}

index.jsx #

import {  Text, View } from 'react-native';
import { Link } from 'expo-router';

export default function HomeScreen() {
  return (
   
    <View className='flex-1 justify-center items-center'>
    <Text className='text-white text-lg'>Hello, Tailwind CSS!</Text>
    <Link href="/profile">Profile</Link>
  </View>


  );
}

问题排查与解决建议 #

• 版本兼容问题：NativeWind v2要求Expo SDK版本≥49，若提示需更新SDK，执行expo upgrade升级到符合要求的版本，同时确保nativewind、tailwindcss版本与当前SDK匹配。
• 修复Babel配置：补充babel.config.js中缺失的闭合}，确保配置文件语法正确。
• 完善Content路径：检查tailwind.config.js的content字段，确保覆盖所有使用className的文件，比如根目录的组件需添加"./components/**/*.{js,jsx,ts,tsx}"等路径。
• 配置Metro（v2要求）：添加正确的metro.config.js配置，示例如下：

  const { getDefaultConfig } = require('expo/metro-config');
  const config = getDefaultConfig(__dirname);
  
  config.resolver.sourceExts.push('cjs');
  
  module.exports = config;
  

• 清除缓存重启：执行npx expo start -c清除开发缓存后重新启动服务，避免缓存导致样式未加载。
• 排查样式可见性：当前文本用了text-white，若父容器背景也是白色，会导致文本不可见，可临时改为text-black测试样式是否生效。

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