gluestack-ui

项目概述

gluestack-ui（前身为大名鼎鼎的 NativeBase）是一套面向现代全栈跨端的通用 UI 组件库。它基于 Tailwind CSS 与 NativeWind 构建，让开发者能够在 React Native 移动端与 Next.js Web 端完全共享相同的 UI 代码与原子类名。

核心特性

• ⚡️ Tailwind 跨端无缝共享：一套原子类名在 Web 浏览器和 iOS/Android 原生视图上获得一致呈现。
• 现代化源码拷贝模式：支持按需拷贝单组件代码，彻底告别庞大冗余的整体包依赖锁死。
• ♿️ 严谨的无障碍状态机：内置健全的 ARIA 属性与焦点控制逻辑，支持外接键盘操作。
• 深度优化 Expo 与 Next.js：完美适配 React Server Components（RSC）与服务端渲染体系。

快速上手与示例代码

npx gluestack-ui@latest add button

import { Button, ButtonText } from '@/components/ui/button';

export default function UniversalButton() {
  return (
    <Button size="md" variant="solid" action="primary">
      <ButtonText>跨端统一按钮</ButtonText>
    </Button>
  );
}

技术选型建议与适用场景

• 非常适合：采用 React Native + Next.js 跨端技术栈并深度依赖 Tailwind CSS 的全栈产品团队。
• 不适用场景：只开发单端 Web 项目且对跨端无任何需求的技术栈。