拓冰网站定制 
移动开发跨平台前端【免费下载链接】nativewindThe utility-first workflow you love from Tailwind CSS in your React Native applications.项目地址https://gitcode.com/gh_mirrors/na/nativewind点击查看免费下载导读本文是 NativeWind在 React Native 应用中提供 Tailwind CSS 式 utility-first 工作流的库的“开始写代码”实战指南。核心目标只有一个把项目里StyleSheet.create的旧式样式迁移为className写法的 Tailwind 类名并让这套写法在你的 Expo / React Native 工程中真正跑起来。读完本文你将掌握两种接入方式Babel 转换自动模式与styled()高阶组件手动模式的完整配置与迁移步骤并能对照仓库源码理解className底层是如何被编译为原生样式的。迁移前后对比这就是 NativeWind 的日常用法官方文档apps/website/docs/_start-coding.md用一个最小改动示例直接展示了从“原生 StyleSheet 风格”到“Tailwind 类名风格”的全部差异import { StatusBar } from expo-status-bar; import React from react; -import { StyleSheet, Text, View } from react-native; import { Text, View } from react-native; export default function App() { return ( - View style{styles.container} View classNameflex-1 items-center justify-center bg-white TextOpen up App.js to start working on your app!/Text StatusBar styleauto / /View ); } -const styles StyleSheet.create({ - container: { - flex: 1, - backgroundColor: #fff, - alignItems: center, - justifyContent: center, - }, -});这个 diff 包含了三个关键信息点className是 NativeWind 的入口属性flex-1、items-center、justify-center、bg-white都是标准的 Tailwind 工具类语义与 Web 端完全一致。StyleSheet.create的容器样式被整段删除原本需要 6 行声明式代码描述的四条样式flex、背景色、两条对齐规则现在压缩进一行类名。Text、View依然来自react-native不需要引入额外的“魔法组件”NativeWind 通过编译/包装层让原生组件直接理解className。仓库中配套的官方示例工程也遵循同样的模式例如 examples/expo-router/app/(tabs)/index.tsx/index.tsx) 这类文件里都直接使用了className而不是style。两种接入模式Babel 自动转换 vsstyled()手动包装上面这段代码能否直接运行取决于你的工程采用了哪一种 NativeWind 接入方式。文档给出了两种等价路径模式一开启 Babel 转换推荐零侵入这是当前主流的接入方式。只要在 Babel 配置中挂载nativewind/babel预设并把 JSX 的导入源切到nativewind那么Text、View等内置组件的className就会在编译期被自动处理不需要在业务代码里做任何包装。官方文档 apps/website/docs/getting-started/react-native.mdx 中的 Expo SDK 50 配置如下module.exports function (api) { api.cache(true); return { presets: [ [babel-preset-expo, { jsxImportSource: nativewind }], nativewind/babel, ], }; };要点说明jsxImportSource: nativewind让 Babel 在编译 JSX 时把jsx/jsxDEV的导入来源切到nativewind的 jsx-runtime 与 jsx-dev-runtime这两个包内都有对应的index.js/index.d.ts。这是className能被运行时识别的前提。nativewind/babel预设则负责把类名静态地转换为 NativeWind 的样式运行时调用对应仓库根目录的 packages/nativewind/babel.js。如果是 framework-less 的 React Native 工程配置更简单只需在现有 presets 末尾追加一项module.exports { - presets: [existing presets], presets: [existing presets, nativewind/babel], };模式二使用styled()高阶组件不启用 Babel 转换时如果你出于某种原因没有接入 Babel 转换例如旧项目、受限的构建管线文档提供了替代方案用styled()高阶组件手动包装目标组件。官方文档 apps/website/docs/_start-coding-components.md 给出了完整示例import { StatusBar } from expo-status-bar; import React from react; -import { StyleSheet, Text, View } from react-native; import { Text, View as RNView } from react-native; import { styled } from nativewind; const View styled(RNView) export default function App() { return ( - View style{styles.container} View classNameflex-1 items-center justify-center bg-white TextOpen up App.js to start working on your app!/Text StatusBar styleauto / /View ); } -const styles StyleSheet.create({ - container: { - flex: 1, - backgroundColor: #fff, - alignItems: center, - justifyContent: center, - }, -});这段代码有两点值得注意因为View被styled()重新定义原导入语句需要给原生View起别名View as RNView避免命名冲突。styled(RNView)返回一个支持className的增强组件。从源码结构看styled的实现在 packages/react-native-css-interop/src/runtime/native/render-component.tsx 及同层的 unwrap-components.ts 中负责将类名解析为原生样式树并由 packages/react-native-css-interop/src/runtime/native/styles.ts 等模块完成样式计算与注入。两种模式最终达到的效果一致区别只在“编译期自动做”还是“运行期手动包”。官方把前者作为默认推荐路径。让className真正跑起来完整前置配置清单仅修改App.js还不够className要生效工程还必须具备以下四项基础配置均可在仓库文档与示例工程中验证1. 安装 NativeWind 并初始化 Tailwind CSS通过npx tailwindcss init生成tailwind.config.js。必须把项目里所有用到className的源码文件路径写入content数组否则 Tailwind 不会为这些文件生成对应的工具类。官方 quick-start 文档apps/website/versioned_docs/version-v2/quick-starts/expo.md中的示例// tailwind.config.js module.exports { - content: [], content: [./App.{js,jsx,ts,tsx}, ./custom directory/**/*.{js,jsx,ts,tsx}], theme: { extend: {}, }, plugins: [], }其中custom directory需要替换为你的真实目录名如screens、components。2. 配置 Metro接入withNativeWind在metro.config.js中引入nativewind/metro的withNativeWind并指定全局 CSS 入口文件const { getDefaultConfig } require(expo/metro-config); const { withNativeWind } require(nativewind/metro); const config getDefaultConfig(__dirname); module.exports withNativeWind(config, { input: ./global.css });对应的实现位于 packages/nativewind/metro/index.ts它会在 Metro 构建管线中注入 Tailwind 的处理逻辑把global.css中的工具类编译成原生可消费的样式。3. 创建并导入全局 CSS 文件新建global.css内容至少需要包含 Tailwind 指令如tailwind base;等并在应用入口导入它import ./global.css export default App() { /* Your App */ }对于 Expo Router 工程官方文档 apps/website/docs/getting-started/expo-router.mdx 要求在根布局app/_layout.js中导入import { Slot } from expo-router; // Import your global CSS file import ../global.css; export default Slot;4. Expo Web可选将 bundler 切换为 Metro如果要在 Web 端使用需要在app.json中显式声明使用 Metro bundler{ expo: { web: { bundler: metro } } }深入原理className到原生样式的编译链从仓库源码结构可以梳理出一条清晰的调用链帮助你理解“一行类名”最终如何变成原生样式编译期Babelpackages/react-native-css-interop/src/babel-plugin.ts 分析 JSX 中的className属性而 packages/nativewind/babel.js 作为 NativeWind 侧的总入口负责将整个流程接入你的 Babel 管线。JSX 运行时编译后的代码会引用 packages/nativewind/jsx-runtime / jsx-dev-runtime 提供的工厂函数它们内部调用 packages/react-native-css-interop/src/runtime/wrap-jsx.ts 对组件进行包装。运行时解析包装层最终把类名字符串交给样式运行时解析为 React Native 的原生style对象——核心逻辑集中在 packages/react-native-css-interop/src/runtime/native 目录styles.ts、stylesheet.ts、resolve-value.ts等并最终通过 packages/nativewind/src/stylesheet.ts 对外暴露的NativeWindStyleSheet完成注册与输出。仓库在 packages/nativewind/src/tests下提供了大量按 CSS 模块组织的快照测试如flexbox-grid.tsx、sizing.tsx、spacing.tsx、typography.tsx等它们直接以“在 JSX 中写className”的方式断言编译产物是验证上述迁移写法正确性的第一手参考。常见注意点style与className可以共存迁移阶段不必一次性删除所有styleNativeWind 允许在组件上同时保留两者便于渐进式改造。Web 端的额外要求如文档所述在 Web 上 NativeWind 是 Tailwind CSS 与 React Native 之间的兼容层需要额外保证 NativeWind 被正确转译例如通过expo/webpack-config的dangerouslyAddModulePathsToTranspile: [nativewind]。TypeScript 工程如果需要完整的类型提示官方建议参照 apps/website/docs/getting-started/typescript.md 配置nativewind-env.d.ts与tsconfig仓库中的示例工程 examples/expo-router/nativewind-env.d.ts 可供对照。小结从StyleSheet.create到className表面上是书写方式的简化底层则是 Babel 编译期 JSX 运行时 样式运行时三段式架构的协同。按本文顺序完成安装、Tailwind 配置、Babel 预设、Metro 接入与全局 CSS 导入后你便可以在任意组件里直接书写flex-1、bg-white、items-center这类类名以 Tailwind 的 utility-first 心智模型编写 React Native 界面。赞分享移动开发跨平台前端【免费下载链接】nativewindThe utility-first workflow you love from Tailwind CSS in your React Native applications.项目地址https://gitcode.com/gh_mirrors/na/nativewind点击查看免费下载相关推荐NativeWind v2 开始编码指南用 className 替换 StyleSheet 编写 React Native 样式NativeWind v2 开始编码指南用 className 替换 StyleSheet 编写 React Native 样式 导读 本篇指南讲解 Nati移动开发跨平台前端PCSX2 模拟器实用性能优化3 档硬件配置不卡顿PCSX2 模拟器实用性能优化3 档硬件配置不卡顿 PCSX2 模拟器让原版 PS2 光盘在现代电脑上跑起来从动作冒险到 RPG 都能覆盖。默认设置下帧率虚拟化桌面应用图形学Voyager 功能全景解析为 Gemini、Claude 与 ChatGPT 打造的统一增强套件Voyager 功能全景解析为 Gemini、Claude 与 ChatGPT 打造的统一增强套件 Voyager 是一个面向 Gemini、AI StudiAI 应用前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 NativeWind 起步实操：用 className 替换 StyleSheet，在 React Native 中写出 Utility-First 代码
移动开发跨平台前端【免费下载链接】nativewindThe utility-first workflow you love from Tailwind CSS in your React Native applications.项目地址https://gitcode.com/gh_mirrors/na/nativewind点击查看免费下载导读本文是 NativeWind在 React Native 应用中提供 Tailwind CSS 式 utility-first 工作流的库的“开始写代码”实战指南。核心目标只有一个把项目里StyleSheet.create的旧式样式迁移为className写法的 Tailwind 类名并让这套写法在你的 Expo / React Native 工程中真正跑起来。读完本文你将掌握两种接入方式Babel 转换自动模式与styled()高阶组件手动模式的完整配置与迁移步骤并能对照仓库源码理解className底层是如何被编译为原生样式的。迁移前后对比这就是 NativeWind 的日常用法官方文档apps/website/docs/_start-coding.md用一个最小改动示例直接展示了从“原生 StyleSheet 风格”到“Tailwind 类名风格”的全部差异import { StatusBar } from expo-status-bar; import React from react; -import { StyleSheet, Text, View } from react-native; import { Text, View } from react-native; export default function App() { return ( - View style{styles.container} View classNameflex-1 items-center justify-center bg-white TextOpen up App.js to start working on your app!/Text StatusBar styleauto / /View ); } -const styles StyleSheet.create({ - container: { - flex: 1, - backgroundColor: #fff, - alignItems: center, - justifyContent: center, - }, -});这个 diff 包含了三个关键信息点className是 NativeWind 的入口属性flex-1、items-center、justify-center、bg-white都是标准的 Tailwind 工具类语义与 Web 端完全一致。StyleSheet.create的容器样式被整段删除原本需要 6 行声明式代码描述的四条样式flex、背景色、两条对齐规则现在压缩进一行类名。Text、View依然来自react-native不需要引入额外的“魔法组件”NativeWind 通过编译/包装层让原生组件直接理解className。仓库中配套的官方示例工程也遵循同样的模式例如 examples/expo-router/app/(tabs)/index.tsx/index.tsx) 这类文件里都直接使用了className而不是style。两种接入模式Babel 自动转换 vsstyled()手动包装上面这段代码能否直接运行取决于你的工程采用了哪一种 NativeWind 接入方式。文档给出了两种等价路径模式一开启 Babel 转换推荐零侵入这是当前主流的接入方式。只要在 Babel 配置中挂载nativewind/babel预设并把 JSX 的导入源切到nativewind那么Text、View等内置组件的className就会在编译期被自动处理不需要在业务代码里做任何包装。官方文档 apps/website/docs/getting-started/react-native.mdx 中的 Expo SDK 50 配置如下module.exports function (api) { api.cache(true); return { presets: [ [babel-preset-expo, { jsxImportSource: nativewind }], nativewind/babel, ], }; };要点说明jsxImportSource: nativewind让 Babel 在编译 JSX 时把jsx/jsxDEV的导入来源切到nativewind的 jsx-runtime 与 jsx-dev-runtime这两个包内都有对应的index.js/index.d.ts。这是className能被运行时识别的前提。nativewind/babel预设则负责把类名静态地转换为 NativeWind 的样式运行时调用对应仓库根目录的 packages/nativewind/babel.js。如果是 framework-less 的 React Native 工程配置更简单只需在现有 presets 末尾追加一项module.exports { - presets: [existing presets], presets: [existing presets, nativewind/babel], };模式二使用styled()高阶组件不启用 Babel 转换时如果你出于某种原因没有接入 Babel 转换例如旧项目、受限的构建管线文档提供了替代方案用styled()高阶组件手动包装目标组件。官方文档 apps/website/docs/_start-coding-components.md 给出了完整示例import { StatusBar } from expo-status-bar; import React from react; -import { StyleSheet, Text, View } from react-native; import { Text, View as RNView } from react-native; import { styled } from nativewind; const View styled(RNView) export default function App() { return ( - View style{styles.container} View classNameflex-1 items-center justify-center bg-white TextOpen up App.js to start working on your app!/Text StatusBar styleauto / /View ); } -const styles StyleSheet.create({ - container: { - flex: 1, - backgroundColor: #fff, - alignItems: center, - justifyContent: center, - }, -});这段代码有两点值得注意因为View被styled()重新定义原导入语句需要给原生View起别名View as RNView避免命名冲突。styled(RNView)返回一个支持className的增强组件。从源码结构看styled的实现在 packages/react-native-css-interop/src/runtime/native/render-component.tsx 及同层的 unwrap-components.ts 中负责将类名解析为原生样式树并由 packages/react-native-css-interop/src/runtime/native/styles.ts 等模块完成样式计算与注入。两种模式最终达到的效果一致区别只在“编译期自动做”还是“运行期手动包”。官方把前者作为默认推荐路径。让className真正跑起来完整前置配置清单仅修改App.js还不够className要生效工程还必须具备以下四项基础配置均可在仓库文档与示例工程中验证1. 安装 NativeWind 并初始化 Tailwind CSS通过npx tailwindcss init生成tailwind.config.js。必须把项目里所有用到className的源码文件路径写入content数组否则 Tailwind 不会为这些文件生成对应的工具类。官方 quick-start 文档apps/website/versioned_docs/version-v2/quick-starts/expo.md中的示例// tailwind.config.js module.exports { - content: [], content: [./App.{js,jsx,ts,tsx}, ./custom directory/**/*.{js,jsx,ts,tsx}], theme: { extend: {}, }, plugins: [], }其中custom directory需要替换为你的真实目录名如screens、components。2. 配置 Metro接入withNativeWind在metro.config.js中引入nativewind/metro的withNativeWind并指定全局 CSS 入口文件const { getDefaultConfig } require(expo/metro-config); const { withNativeWind } require(nativewind/metro); const config getDefaultConfig(__dirname); module.exports withNativeWind(config, { input: ./global.css });对应的实现位于 packages/nativewind/metro/index.ts它会在 Metro 构建管线中注入 Tailwind 的处理逻辑把global.css中的工具类编译成原生可消费的样式。3. 创建并导入全局 CSS 文件新建global.css内容至少需要包含 Tailwind 指令如tailwind base;等并在应用入口导入它import ./global.css export default App() { /* Your App */ }对于 Expo Router 工程官方文档 apps/website/docs/getting-started/expo-router.mdx 要求在根布局app/_layout.js中导入import { Slot } from expo-router; // Import your global CSS file import ../global.css; export default Slot;4. Expo Web可选将 bundler 切换为 Metro如果要在 Web 端使用需要在app.json中显式声明使用 Metro bundler{ expo: { web: { bundler: metro } } }深入原理className到原生样式的编译链从仓库源码结构可以梳理出一条清晰的调用链帮助你理解“一行类名”最终如何变成原生样式编译期Babelpackages/react-native-css-interop/src/babel-plugin.ts 分析 JSX 中的className属性而 packages/nativewind/babel.js 作为 NativeWind 侧的总入口负责将整个流程接入你的 Babel 管线。JSX 运行时编译后的代码会引用 packages/nativewind/jsx-runtime / jsx-dev-runtime 提供的工厂函数它们内部调用 packages/react-native-css-interop/src/runtime/wrap-jsx.ts 对组件进行包装。运行时解析包装层最终把类名字符串交给样式运行时解析为 React Native 的原生style对象——核心逻辑集中在 packages/react-native-css-interop/src/runtime/native 目录styles.ts、stylesheet.ts、resolve-value.ts等并最终通过 packages/nativewind/src/stylesheet.ts 对外暴露的NativeWindStyleSheet完成注册与输出。仓库在 packages/nativewind/src/tests下提供了大量按 CSS 模块组织的快照测试如flexbox-grid.tsx、sizing.tsx、spacing.tsx、typography.tsx等它们直接以“在 JSX 中写className”的方式断言编译产物是验证上述迁移写法正确性的第一手参考。常见注意点style与className可以共存迁移阶段不必一次性删除所有styleNativeWind 允许在组件上同时保留两者便于渐进式改造。Web 端的额外要求如文档所述在 Web 上 NativeWind 是 Tailwind CSS 与 React Native 之间的兼容层需要额外保证 NativeWind 被正确转译例如通过expo/webpack-config的dangerouslyAddModulePathsToTranspile: [nativewind]。TypeScript 工程如果需要完整的类型提示官方建议参照 apps/website/docs/getting-started/typescript.md 配置nativewind-env.d.ts与tsconfig仓库中的示例工程 examples/expo-router/nativewind-env.d.ts 可供对照。小结从StyleSheet.create到className表面上是书写方式的简化底层则是 Babel 编译期 JSX 运行时 样式运行时三段式架构的协同。按本文顺序完成安装、Tailwind 配置、Babel 预设、Metro 接入与全局 CSS 导入后你便可以在任意组件里直接书写flex-1、bg-white、items-center这类类名以 Tailwind 的 utility-first 心智模型编写 React Native 界面。赞分享移动开发跨平台前端【免费下载链接】nativewindThe utility-first workflow you love from Tailwind CSS in your React Native applications.项目地址https://gitcode.com/gh_mirrors/na/nativewind点击查看免费下载相关推荐NativeWind v2 开始编码指南用 className 替换 StyleSheet 编写 React Native 样式NativeWind v2 开始编码指南用 className 替换 StyleSheet 编写 React Native 样式 导读 本篇指南讲解 Nati移动开发跨平台前端PCSX2 模拟器实用性能优化3 档硬件配置不卡顿PCSX2 模拟器实用性能优化3 档硬件配置不卡顿 PCSX2 模拟器让原版 PS2 光盘在现代电脑上跑起来从动作冒险到 RPG 都能覆盖。默认设置下帧率虚拟化桌面应用图形学Voyager 功能全景解析为 Gemini、Claude 与 ChatGPT 打造的统一增强套件Voyager 功能全景解析为 Gemini、Claude 与 ChatGPT 打造的统一增强套件 Voyager 是一个面向 Gemini、AI StudiAI 应用前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考