javascript - 如何使用 nativewind 通过 react 导航来 react native 博览会

Question

我一直在尝试将 tailwindcss 集成到我的 react native expo 项目中，当我在 App.js 中应用 tailwind classNames 时它工作正常，但是当我向它添加 react 导航并尝试使用中的样式时Homscreen.js 组件的样式没有显示，也没有任何反应。这只是纯文本。

这是我的 tailwindcss.config.js 文件

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

这是我的 babel.config.js 文件

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

这是我的 App.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 Homescreen from './screen/Homescreen';

export default function App() {

 const Stack=createNativeStackNavigator();

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

这是我的 Homescreen 组件 Homescreen.js 文件

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

const Homescreen = () => {

  return (
   <View className="flex-1 justify-center text-center">
    <Text className="text-green-700">
      HOme screen styles test
    </Text>
   </View>
  )
}

export default Homescreen

代码图片和结果 tailwindcss.config.js and babel.config.js

App.js homescreen and results

Answer 1

在带有反应导航的 react native expo 应用程序中为新目录自定义“tailwind.config.js”文件是必要的，但如果您的 nativewind 样式仍然无法正常工作，则停止 expo 服务器而不是启动它这个expo start , 这样做 expo start -c删除 nativewind 添加的缓存以重新启动服务器。

来源:https://www.nativewind.dev/guides/troubleshooting

自定义“tailwind.config.js”文件时，在创建自定义“screens”目录或任何其他组件目录后，添加该目录路径 "./screens/**/*.{js,jsx,ts,tsx}"到“tailwind.config.js”中的“内容:”属性。您不必但应该删除 "./<custom directory>/**/*.{js,jsx,ts,tsx}"],这将使您的代码保持整洁，并且实际上仅用于教学目的，请参见下文:

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