Nativewind 样式未应用于 React Native 和 Expo 应用程序

Question

我正在使用 expo 构建一个 React Native 应用程序。我正在尝试使用 Nativewind 来设计它。但是当我尝试将样式应用到组件时，它们没有被应用。

没有显示错误，只是样式没有被实现。

babel.config.js

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

tailwind.config.js

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

tsconfig.json

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "paths": {
      "@/*": [
        "./*"
      ]
    },
    "types": ["nativewind/types"]
  },
  "include": [
    "**/*.ts",
    "**/*.tsx",
    ".expo/types/**/*.ts",
    "expo-env.d.ts",
    "nativewind-env.d.ts",
    "app/_layout.jsx", 
    "app/index.jsx"  ]
}

index.jsx

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

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


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

layout.jsx

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

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

// Prevent the splash screen from auto-hiding before asset loading is complete.
// SplashScreen.preventAutoHideAsync();

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

原生风版本：^2.0.11 顺风版本：^3.3.2

如何应用 nativewind 的 className 属性中的样式？

Answer 1

我遇到了同样的问题，我安装了nativewind 2.0.0版本，问题解决了

祝你好运