Expo+React Native项目中Nativewind样式不生效的解决请求

1. 替换style为className属性 #

Nativewind v2.x要求使用className而非style来传递Tailwind类名，这是当前样式不生效的核心原因。修改你的index.jsx：

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

NativeWindStyleSheet.setOutput({
  default: "native",
  web: "css"
});

export default function App() {
  return (
    <View className='flex-1 items-center justify-center bg-white'>
      <Text className='text-3xl font-bold'>Hello mate!!</Text>
      <StatusBar style='auto'/>
      <Link href="/profile" className="text-blue-500">Go to profile</Link>
    </View>
  );
}

2. 移除冗余导入 #

import 'nativewind'在Nativewind v2.x版本中属于不必要的导入，直接删除即可。

3. 统一配置位置 #

你在index.jsx和layout.jsx中重复配置了NativeWindStyleSheet.setOutput，建议只在项目入口（如_layout.jsx）配置一次，避免重复代码：

import { Slot, Stack } from 'expo-router';
import React from 'react';
import { NativeWindStyleSheet } from "nativewind";

NativeWindStyleSheet.setOutput({
  default: "native",
  web: "css"
});

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

同时删除index.jsx中的对应配置代码。

4. 重置依赖与缓存 #

执行以下命令确保依赖无冲突并清除Expo缓存：

# 重新安装依赖
npm install
# 清除缓存并重启开发服务器
npx expo start -c

完成以上操作后，Nativewind的样式即可正常生效。

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