如何在 React Native 应用中使用 shadcn/ui【完整指南】
BestBlog编程类文章 · 软件开发
📌 One-Sentence Summary 本指南全面介绍如何借助 React Native Reusables、Expo 和 Uniwind，将 shadcn/ui 组件集成到 React Native 应用中，构建咖啡店购物车与结账页面，并妥善处理主题设置、移动端特有需求及最佳实践。 📝 Summary 本文详细介绍如何通过 React Native Reusables 库在 React Native 应用中使用 shadcn/ui。文章阐释了传统组件库与 shadcn/ui 的核心区别：后者会将源代码复制到项目中，便于完全自定义。指南还逐步展示如何构建完整的咖啡店购物车与结账页面，介绍注册表中的 12 个组件，讲解安全区域、键盘和 Portal 等移动端特有问题的处理方式，以及深色模式和主题的实现方法，并提醒读者避免常见错误。主要工具包括用于创建项目的 Expo、用于实现 Tailwind 风格样式的 Uniwind，以及提供组件库的 React Native Reusables。 💡 Main Points shadcn/ui 的核心理念是将组件源代码复制到项目中，而不是将其作为软件包依赖安装。 这种方式让开发者完全拥有组件并可随意编辑，无需新增 props、创建分支或维护单独的问题跟踪器。CLI 会读取包含组件源代码和依赖项的注册表 JSON 文件，然后将内容复制到你的代码仓库中。 React Native Reusables 针对移动端调整了 shadcn/ui，专门处理 Portal、不具备级联特性的样式，以及通过 props 设置图标属性等问题。 与 Web 版本不同，React Native 需要使用 PortalHost 组件来承载下拉菜单等浮动元素；需要用 Text 组件封装文本，以处理样式继承；为图标设置颜色和尺寸时，则需传入 props，而不是使用 CSS 类。这些差异贯穿整篇教程，并有详细说明。 本指南通过 12 种不同组件展示如何构建完整的咖啡店结账页面，同时讲解移动端开发的最佳实践。 实践部分涵盖使用 Card 和 Avatar 构建商品行、使用 Button 和 Icon 实现数量调节器、使用 Select 选择取货时间、处理姓名输入框与键盘、设置切换开关、展示账单摘要、固定结账栏，以及确认对话框；每项都展示了 React Native 中的特定挑战。 设计令牌与主题设置集中在一个主题文件中，取代分散各处的颜色常量。 系统无需再维护包含多种颜色变体、不断膨胀的 colors.ts 文件，而是在 lib/theme.ts 和 global.css 中统一定义 primary、muted、border、destructive 等命名颜色角色，并在组件中通过 bg-primary 这类 className 字符串引用。 💬 Key Quotes 这不是一个组件库，而是构建你自己的组件库的方式。 你不会把 shadcn/ui 作为常规依赖添加到 package.json 中。它使用的是注册表。 像 components/ui/button.tsx 这样的组件存放在你的代码仓库中，也会出现在 Git 差异记录里。如果你想让按下时的状态更暗一些，只需直接修改对应代码行。 设计由命名颜色承载，而不是通过 props 设置：颜色只需定义一次，并采用 primary、muted、border 和 destructive 等命名角色。 📊 Article Meta AI Screening： 88 Source： freeCodeCamp Author： Ajay Patel Category： 软件编程 Language： 英文 Read Time： 41 min Word Count： 10205 Tags： 编程与工程 , 移动开发 , 设计系统 , 前端与 Web , UI 设计 Read Full Article