我一直在尝试将tailwindcss集成到我的react原生expo项目中,当我在App.js中应用tailwindclassNames时,它运行得很好,但是当我向它添加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.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.jshomescreen and results
4条答案
按热度按时间s4n0splo1#
在带有react导航的react原生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"的"content:"属性中。您不必删除"./<custom directory>/**/*.{js,jsx,ts,tsx}"],
,但应该删除"./<custom directory>/**/*.{js,jsx,ts,tsx}"],
这将保持代码干净,实际上只是出于指导目的,请参阅以下内容:nimxete22#
我找到解决办法了
为屏幕或其他组件创建一个自定义目录,然后将该目录添加到tailwind.config.css
在我的例子中,我创建的自定义目录是"screens"
qeeaahzv3#
定制我的“tailwind.config.js”文件和使用expo start-c对我来说很有效
qkf9rpyu4#
像这样编辑tailwind.config.js并将HomeScreen.js移到Components文件夹。没有人可以阻止它工作!!!