React Native Expo：nativewind 的 Tailwindcss TailwindProvider 的替代选项是什么

Question

我正在使用 expo 将 tailwindcss 集成到 React Native 项目中，但旧版本的 tailwindcss (https://tailwindcss-react-native.vercel.app) 现已弃用，现在是 nativewind (https://www. nativewind.dev/)

我现在正在关注nativewind(https://www.nativewind.dev/)

我已经添加了 tailwind 的依赖项

yarn add nativewind
yarn add --dev tailwindcss

然后添加tailwind.config.ts

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

然后将 babel.config.js 更新为

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

现在我尝试在 App.js 文件中添加 TailwindProvider 但收到错误

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from './screens/HomeScreen';
import { TailwindProvider } from 'nativewind';
//import { TailwindProvider } from 'tailwindcss-react-native';

export default function App() {

  const Stack = createNativeStackNavigator()
  return (
    <NavigationContainer>
      <TailwindProvider>
        <Stack.Navigator>
          <Stack.Screen name='Home' component={HomeScreen} />
        </Stack.Navigator>
      </TailwindProvider>
    </NavigationContainer>
  );
}

HomeScreen.js

import { View, Text } from 'react-native'
import React from 'react'

export default function HomeScreen() {
  return (
    <View>
      <Text>HomeScreen</Text>
    </View>
  )
}

错误是：

我被困在这里如何使用 TailwindProvider 和新的 API (https://www.nativewind.dev/quick-starts/expo)

Answer 1

我一直在使用 tailwind-react-native-classnames 没有任何问题。

Answer 2

大约 30 分钟前我遇到了同样的问题，这就是我所做的。我停止了应用程序，删除了该组件并再次重新创建了该组件，我不知道为什么，但由于某种原因它开始工作...而且我认为在使用nativewind时不需要

tailwindprovider

...使用我的没有它并且工作得很好。

代码：

应用程序.js

import { StatusBar } from 'expo-status-bar';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Home from './screens/Home';

export default function App() {

 const Stack=createNativeStackNavigator();

  return (
    <NavigationContainer>
    <Stack.Navigator>
     <Stack.Screen name='Home' component={Home}/>
    </Stack.Navigator>
    </NavigationContainer>
   
  );
}

Home.js：

import { View, Text } from 'react-native'
import React from 'react'

const Home = () => {
  return (
    <View >
      <Text className="text-red-600">Home screen style test</Text>
    </View>
  )
}

export default Home