React Native集成NativeWind报错：Use process(css).then(cb) to work with async plugins

我是React Native新手，跟着YouTube教程学习，之前项目运行正常，但添加NativeWind后出现打包失败的错误，报错信息如下：

Android Bundling failed 187129ms C:\Users\user2\Desktop\Apps\test_app\node_modules\expo-router\entry.js (936 modules)
error: app_layout.jsx: C:\Users\user2\Desktop\Apps\gimflo\app_layout.jsx: Use process(css).then(cb) to work with async plugins

相关代码文件： #

index.jsx

import React from 'react';
import { StatusBar } from 'expo-status-bar';
import { Text, View } from 'react-native';
import { Link } from 'expo-router';
import { styled } from 'nativewind';

const StyledView = styled(View);
const StyledText = styled(Text);
const StyledLink = styled(Link);

export default function App() {
  return (
    <StyledView className="flex-1 items-center justify-center bg-white">
      <StyledText className="text-3xl">Hello World</StyledText>
      <StatusBar style="auto" />
      <StyledLink href="/profile" className="text-blue-500">
        Go to Profile
      </StyledLink>
    </StyledView>
  );
}

_layout.jsx

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

const RootLayout = () => {
  return (
    <Stack>
        <Stack.Screen name='index' options={{ headerShown: false }} />
    </Stack>
  )
}

export default RootLayout

babel.config.js

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

解决步骤 #

这个报错大多是NativeWind版本与Expo Router的兼容性问题，或者配置未正确设置，按以下步骤处理：

1. 升级NativeWind到最新稳定版（v4）
   执行命令更新依赖：

   npm install nativewind@latest
   # 或使用yarn
   yarn add nativewind@latest
   

2. 更新babel.config.js配置
   修改为NativeWind v4要求的配置结构：

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

3. 添加/更新tailwind.config.js
   在项目根目录创建或修改该文件，指定需要处理的文件路径：

   /** @type {import('tailwindcss').Config} */
   module.exports = {
     content: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],
     theme: {
       extend: {},
     },
     plugins: [],
   }
   

4. 在根布局中配置NativeWind输出
   修改app/_layout.jsx，添加NativeWind样式输出配置：

   import { Text, View } from 'react-native'
   import { Slot, Stack } from 'expo-router';
   import { NativeWindStyleSheet } from "nativewind";
   
   NativeWindStyleSheet.setOutput({
     default: "native",
   });
   
   const RootLayout = () => {
     return (
       <Stack>
           <Stack.Screen name='index' options={{ headerShown: false }} />
       </Stack>
     )
   }
   
   export default RootLayout
   

5. 清除缓存并重启Metro
   执行命令清除缓存后重新启动项目：

   npx expo start --clear
   

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