# 使用 React-native-css 为 Expo 设置 Tailwind CSS 本指南介绍了使用react-native-css和NativeWind v5在Expo中设置Tailwind CSS v4，以实现跨iOS、Android和Web的通用样式。 ## 概述此设置使用： * **Tailwind CSS v4** \- 现代 CSS 优先配置 * **react-native-css** \- React Native 的 CSS 运行时 * **NativeWind v5** \- React Native 中 Tailwind 的 Metro 变压器 * **@tailwindcss/postcss** \- Tailwind v4 的 PostCSS 插件 ## 安装 # 安装依赖项 npx expo install tailwindcss@^4 nativewind@5.0.0-preview.2 react-native-css@0.0.0-nightly.5ce6396 @tailwindcss/postcss tailwind-merge clsx 添加 LightningCSS 兼容性的分辨率： // 包.json { “决议”：{ “lightningcss”：“1.30.1” } } * 由于 LightningCSS，Expo 中不需要 autoprefixer * postcss默认包含在expo中 ## 配置文件 ### 地铁配置创建或更新`metro.config.js`： // Metro.config.js const { getDefaultConfig } = require("expo/metro-config"); const { withNativewind } = require("nativewind/metro"); /** @type {import('expo/metro-config').MetroConfig} */ const config = getDefaultConfig(__dirname); module.exports = withNativewind(config, { // 内联变量破坏 CSS 变量中的 PlatformColor 内联变量：假， // 我们手动添加 className 支持 globalClassNamePolyfill: false, }); ### PostCSS 配置创建`postcss.config.mjs`： // postcss.config.mjs 导出默认值{ 插件：{ "@tailwindcss/postcss": {}, }, }; ### 全局 CSS 创建`src/global.css`： @import“tailwindcss/theme.css”层（主题）； @import“tailwindcss/preflight.css”层（基础）； @import“tailwindcss/utilities.css”； /* 平台特定的字体系列 */ @媒体安卓{ ：根{ --font-mono：等宽字体； --font-rounded：正常； --字体衬线：衬线； --font-sans：正常； } } @媒体ios{ ：根{ --font-mono: ui-monospace; --字体衬线：用户界面衬线； --font-sans：系统用户界面； --font-rounded: ui-rounded； } } ## 重要：不需要 Babel 配置使用 Tailwind v4 和 NativeWind v5，您不需要为 Tailwind 提供 babel.config.js。删除任何 NativeWind babel 预设（如果存在）： // 如果 babel.config.js 仅包含 NativeWind 配置，则删除它 // 不再需要以下内容： // module.exports = 函数 (api) { // api.cache(true); //返回{ // 预设：[ // ["babel-preset-expo", { jsxImportSource: "nativewind" }], // “nativewind/babel”, //], // }; // }; ## CSS 组件包装器由于react-native-css需要显式的CSS元素包装，因此创建可重用的组件： ### 主要组件 (`src/tw/index.tsx`) 导入{ 使用CSS元素， useNativeVariable 作为 useFunctionalVariable，来自“react-native-css”；从“expo-router”导入{链接为RouterLink}；从“react-native-reanimated”导入动画；从“反应”导入反应；导入{ 查看为 RNView，文本为 RNText，可按 RNPressable， ScrollView 作为 RNScrollView， TouchableHighlight 作为 RNTouchableHighlight， TextInput 作为 RNTextInput，样式表，来自“react-native”； // 支持 CSS 的链接导出常量链接 = ( props: React.ComponentProps & { className?: string } ) => { 返回 useCssElement(RouterLink, props, { className: "style" }); }; Link.Trigger = RouterLink.Trigger; Link.Menu = RouterLink.Menu; Link.MenuAction = RouterLink.MenuAction; Link.Preview = RouterLink.Preview; // CSS 变量钩子导出 const useCSSVariable = process.env.EXPO_OS !== "网络" ？使用函数变量 : (变量: 字符串) => `var(${variable})`; // 查看导出类型 ViewProps = React.ComponentProps & { 类名？：字符串； }; 导出 const View = (props: ViewProps) => { 返回 useCssElement(RNView, props, { className: "style" }); }; View.displayName = "CSS(视图)"; // 文本导出常量文本 = ( props: React.ComponentProps & { className?: string } ) => { 返回 useCssElement(RNText, props, { className: "style" }); }; Text.displayName = "CSS(文本)"; // 滚动视图导出 const ScrollView = ( 道具：React.ComponentProps & { 类名？：字符串； contentContainerClassName？：字符串； } ) => { 返回 useCssElement(RNScrollView, 道具, { 类名：“风格”， contentContainerClassName: "contentContainerStyle", }); }; ScrollView.displayName = "CSS(ScrollView)"; // 可按导出常量可压 = ( props: React.ComponentProps & { className?: string } ) => { 返回 useCssElement(RNPressable, props, { className: "style" }); }; Pressable.displayName = "CSS(Pressable)"; // 文本输入导出常量文本输入 = ( props: React.ComponentProps & { className?: string } ) => { 返回 useCssElement(RNTextInput, props, { className: "style" }); }; TextInput.displayName = "CSS(TextInput)"; // 动画滚动视图导出常量 AnimatedScrollView = ( 道具：React.ComponentProps & { 类名？：字符串；内容类名？：字符串； contentContainerClassName？：字符串； } ) => { 返回 useCssElement(Animated.ScrollView, props, { 类名：“风格”， contentClassName: "contentContainerStyle", contentContainerClassName: "contentContainerStyle", }); }; // TouchableHighlight 与 underlayColor 提取函数 XXTouchableHighlight( 道具：React.ComponentProps ）{ const { underlayColor, ...style } = StyleSheet.flatten(props.style) || {}；返回（）； } 导出 const TouchableHighlight = ( 道具：React.ComponentProps ) => { 返回 useCssElement(XXTouchableHighlight, props, { className: "style" }); }; TouchableHighlight.displayName = "CSS(TouchableHighlight)"; ### 图像组件 (`src/tw/image.tsx`) 从“react-native-css”导入{useCssElement}；从“反应”导入反应；从“react-native”导入{StyleSheet}；从“react-native-reanimated”导入动画；从“expo-image”导入{图像为RNImage}； const AnimatedExpoImage = Animated.createAnimatedComponent(RNImage); 导出类型 ImageProps = React.ComponentProps; 函数 CSSImage(props: React.ComponentProps) { // @ts-expect-error：将 objectFit 样式重新映射到 contentFit 属性 const { objectFit, objectPosition, ...style } = StyleSheet.flatten(props.style) || {}；返回（ <动画博览会图像内容适合={对象适合} 内容位置={对象位置} {...道具} 来源={ typeof props.source ===“字符串”？ { uri: props.source } : props.source } // @ts-expect-error: 样式在上面重新映射风格={风格} /> ）； } 导出常量图像 = ( props: React.ComponentProps & { className?: string } ) => { 返回 useCssElement(CSSImage, props, { className: "style" }); }; Image.displayName = "CSS(图像)"; ### 动画组件 (`src/tw/animated.tsx`) 从“./index”导入*作为TW；从“react-native-reanimated”导入 RNAnimated；导出常量动画 = { ...RN动画，视图：RNAnimated.createAnimatedComponent(TW.View), }; ## 用法从 tw 目录导入 CSS 包装的组件：从“@/tw”导入{视图、文本、滚动视图、图像}；导出默认函数 MyScreen() { 返回（ <查看类名=“p-4间隙-4”> 你好，Tailwind！ <图片 className =“w-full h-48 rounded-lg object-cover” 来源={{ uri: "https://example.com/image.jpg" }} /> ）； } ## 自定义主题变量使用“@theme”在 global.css 中添加自定义主题变量： @层主题{ @主题{ /* 自定义字体 */ --font-rounded: "SF Pro Rounded", sans-serif; /* 自定义行高 */ --text-xs--行高：计算（1em / 0.75）； --text-sm--行高：计算（1.25em / 0.875）； --text-base--line-height: calc(1.5em / 1); /* 自定义主尺度 */ --领先紧：1.25em； --领先-舒适：1.375em； --领先正常：1.5em； } } ## 特定于平台的样式使用平台媒体查询来实现特定于平台的样式： @媒体ios{ ：根{ --font-sans：系统用户界面； --font-rounded: ui-rounded； } } @媒体安卓{ ：根{ --font-sans：正常； --font-rounded：正常； } } ## Apple 系统颜色与 CSS 变量为 Apple 语义颜色创建 CSS 文件： /* src/css/sf.css */ @层基础{ html{ 配色方案：浅色； } } ：根{ /* 浅色/深色模式的强调色 */ --sf-blue: 浅色-深色(rgb(0 122 255), rgb(10 132 255)); --sf-green: 亮暗(rgb(52 199 89), rgb(48 209 89)); --sf-red: 亮暗(rgb(255 59 48), rgb(255 69 58)); /* 灰度图 */ --sf-gray: 亮暗(rgb(142 142 147), rgb(142 142 147)); --sf-gray-2: 亮暗(rgb(174 174 178), rgb(99 99 102)); /* 文字颜色 */ --sf-text: 亮暗(rgb(0 0 0), rgb(255 255 255)); --sf-text-2: 亮暗(rgb(60 60 67 / 0.6), rgb(235 235 245 / 0.6)); /* 背景颜色 */ --sf-bg: 亮暗(rgb(255 255 255), rgb(0 0 0)); --sf-bg-2: 亮暗(rgb(242 242 247), rgb(28 28 30)); } /* 通过 platformColor 实现 iOS 原生颜色 */ @媒体ios{ ：根{ --sf-blue: 平台颜色(systemBlue); --sf-green: 平台颜色(systemGreen); --sf-red: 平台颜色(systemRed); --sf-gray: 平台颜色(systemGray); --sf-text: 平台颜色(标签); --sf-text-2: platformColor(二级标签); --sf-bg: 平台颜色(系统背景); --sf-bg-2: platformColor(辅助系统背景); } } /* 注册为 Tailwind 主题颜色 */ @层主题{ @主题{ --color-sf-blue: var(--sf-blue); --color-sf-green: var(--sf-green); --color-sf-red: var(--sf-red); --color-sf-gray: var(--sf-gray); --color-sf-text: var(--sf-text); --color-sf-text-2: var(--sf-text-2); --color-sf-bg: var(--sf-bg); --color-sf-bg-2: var(--sf-bg-2); } } 然后在组件中使用：主要文本辅助文本 ... ## 在 JavaScript 中使用 CSS 变量使用`useCSSVariable`钩子：从“@/tw”导入{useCSSVariable}；函数 MyComponent() { const blue = useCSSVariable("--sf-blue"); 返回 ; } ## 与 NativeWind v4 / Tailwind v3 的主要区别 1. **没有 babel.config.js** \- 配置现在是 CSS-first 2. **PostCSS 插件** \- 使用 `@tailwindcss/postcss` 而不是 `tailwindcss` 3. **CSS 导入** \- 使用 `@import "tailwindcss/..."` 而不是 `@tailwind` 指令 4. **主题配置** \- 在 CSS 中使用 `@theme` 而不是 `tailwind.config.js` 5. **组件包装器** \- 必须使用 `useCssElement` 包装组件以获得 className 支持 6. **Metro 配置** \- 使用带有不同选项的 `withNativewind` (`inlineVariables: false`) ## 故障排除 ### 样式不适用 1. 确保您的应用程序条目中导入了 CSS 文件 2. 检查组件是否用`useCssElement`包装 3. 验证 Metro 配置已应用“withNativewind” ### 平台颜色不起作用 1. 在`@media ios`块中使用`platformColor()` 2. 对于 web/Android 回退到 `light-dark()` ### TypeScript 错误将 className 添加到组件 props 中： type Props = React.ComponentProps & { className?: string };

世博会顺风设置

包含技能