关于

你是否喜欢使用 Tailwind CSS 来为你的应用添加样式？NativeWind 能帮助你实现这一点，它适用于 React Native。NativeWind 不是一个组件库，而是一个样式库。如果你在寻找支持 NativeWind 的组件库，请查看下面。

NativeWind 确保你为任何特定平台使用最佳样式引擎（例如 CSS StyleSheet 或 StyleSheet.create）。它的目标是提供跨所有平台的一致样式体验，提升开发者体验、组件性能和代码可维护性。

NativeWind 在应用程序的构建步骤中处理你的样式，并使用最小运行时来选择性地应用响应式样式（例如设备方向变化、亮暗模式变化）。

安装

如果你已经有了一个现有项目，请使用这些指南 为你的相应技术栈配置 NativeWind。

或者，你可以通过以下快速启动选项创建一个新的预配置项目。

快速启动

你可以选择以下任一选项开始：

• 创建 Expo Stack: npx create-expo-stack@latest --nativewind
• 创建 Expo App: npx create-expo-app -e with-nativewind（正在修复以支持 v4）

功能

• 在 所有 RN 平台上运行，为每个平台使用最佳样式系统。
• 使用 Tailwind CSS 编译器
• 样式在 构建时 计算得出
• 小型运行时使你的组件保持快速
• jsxImportSourceTransform 仅包装原生组件，使其更轻量并且 className 属性在组件内可访问
• 遵守所有 tailwind.config.js 设置，包括 主题、自定义值 和 插件
• 支持
  • 自定义 CSS 属性，即 CSS 变量
  • 暗模式、任意类 和 媒体查询
  • 动画 和 过渡
  • 容器查询
    • 不支持 container-type 和基于样式的容器查询
  • 伪类 - 在兼容组件上 hover / focus / active
  • rem 单位
  • 主题函数和嵌套函数
  • React 18 Suspense API
  • 自定义 CSS
• 基于 父状态修饰符 的样式 - 自动根据父伪类样式子元素
  • 支持 group 和 group/<name> 语法
• 子元素样式 - 根据父类创建简单布局
• 通过热重载实现快速且一致的样式应用
  • 包括对 tailwind.config.js 的更改

更多细节请在此查看

npm 分发标签

值得注意的是，我们的 GitHub 分支并不直接对应于 npm 分发标签。相反，我们通过自动化的 GitHub 操作（推送到 main -> 发布到 next）或手动方式部署到特定的 npm 标签。

• 发布版： latest（当前为 v2.0.11）
  • 你应该使用这个版本
• 金丝雀版： canary（当前为 v4.0.36）
  • 你可以使用这个版本
  • 可能不如最新版稳定，但很可能更健壮
• 实验版： next 标签（当前为 v4.1）
  • 你可能不应该使用这个版本
  • 正在测试以迁移到发布版
• 前沿版： 带有 0.0.0- 前缀的快照版本
  • 你不应该使用这个版本
  • 内部用于向 next 版本迁移

贡献

查看此指南

常见问题

v4 是否安全使用？

使用 canary 版本是相当安全的，除了一个已知问题，即样式应用不一致。这个问题已在 next 版本中解决；然而，使用这个分发标签可能会破坏你的应用程序，因为它被认为是实验性的。要了解哪些版本对应这些分发标签，请参考 我们的 npm 分发标签。

NativeWind 会迁移到 Expo 吗？

不会。Expo 一直在探索更好的处理样式的方法，但作为项目的 NativeWind 不会迁移到 Expo 组织。

我们可以通过设置或某种方式禁用最近自动添加 nativewind 类型的更改吗？我已经使用了 compilerOptions.types，所以我想禁用文件生成。

目前还不可以。我们发现这会导致长期问题，人们“忘记”了他们的类型配置是如何工作的。然后他们更新他们的类型并破坏 NativeWind 的类型。为了解决这个问题，我们复制了其他主要框架的行为，即单独处理他们的类型和用户指定的类型。

未来，我们可能会添加一个像 dangerouslyDisableTypeScriptGeneration 或类似的选项，以防止人们使用它。我们厌倦了解决 TypeScript 的问题，尤其是像“我的类型以前是正常工作，现在不工作了”这样的问题。

v3 怎么了？

就像 Valve 一样，我们不喜欢数字 3。不，我们曾经有一个 V3，但这是个糟糕的想法，需要重新设计，所以我们放弃了它，直接过渡到 v4。

如果我在寻找使用 NativeWind 的组件库怎么办？

有许多不同的组件库可以使用 NativeWind 实现不同的效果。你应该选择最适合你需求的库。

NativeWindUI

这个跨平台库专注于为每个单独的平台实现本地感觉，使用熟悉的 Tailwind CSS 界面。

React Native Reusables

这个开源库提供了通用的 shadcn/ui 通过 React Native。将其作为开发自己高质量组件库的基础。

GluestackUI v2

来自 NativeBase 团队的这个库提供了可定制的跨平台组件，设计用于在所有平台上看起来和行为都整洁。

从 v2 到 v4 的重大更改有哪些？

所有的重大更改都在这里概述。

文档

在我们的网站上了解更多信息。