关于 react-native-reusables
面向 React Native 开发的组件参考 skill，将 shadcn/ui 式组件使用方式带到 React Native，涵盖复制或 CLI 脚手架、CSS 变量主题及 RN Primitives。
主要功能
- 01复制粘贴或 CLI 添加组件
- 02基于 CSS 变量的主题定制
- 03RN Primitives 实现基础
- 04表单、控件与覆盖层组件
- 05组件注册表与 CLI 操作
- 06PortalHost 覆盖层配置
适用场景
- 01初始化组件库并添加组件
- 02定制应用组件主题
- 03搭建表单和选择控件
- 04配置 Dialog 与 Popover 覆盖层
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/react-native-reusables确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
GENERATION.mdreferences/best-practices-adding-components.mdbest-practices-troubleshooting.mdcore-customization.mdcore-installation.mdcore-overview.mdfeatures-blocks.mdfeatures-components-overview.mdfeatures-forms-controls.mdfeatures-overlays-portals.mdfeatures-registry-cli.mdfeatures-text-and-icons.md详细介绍
该技能基于 React Native Reusables（文档截至 2026-02-26），生成于 2026-02-26。
React Native Reusables 将 shadcn/ui 体验带到了 React Native：复制粘贴或通过 CLI 脚手架生成的组件、基于 CSS 变量的主题定制，以及底层使用的 RN Primitives。它支持 Nativewind 和 Uniwind，需要一个根级 PortalHost 来渲染浮层，并使用了 Text 继承系统和用于 Lucide 的 Icon 封装。
核心参考
| 主题 | 描述 | 参考 |
|---|---|---|
| 概述 | RNR 是什么、与 shadcn/ui 的区别（portal、无级联、图标等） | core-overview |
| 安装 | CLI init 与手动设置、添加组件、PortalHost、依赖项 | core-installation |
| 自定义 | components.json、global.css、tailwind.config、theme.ts | core-customization |
功能
组件与模式
| 主题 | 描述 | 参考 |
|---|---|---|
| 组件概述 | Button、Input、Dialog、变体、asChild、复合组件 | features-components-overview |
| 文本与图标 | TextClassContext 继承、基于 Lucide 的 Icon 封装 | features-text-and-icons |
| 表单与控件 | Label、Input、Select、Checkbox、RadioGroup、复合模式 | features-forms-controls |
| 浮层与 portal | PortalHost、Dialog/Popover/SelectContent、contentInsets | features-overlays-portals |
| 注册表与 CLI | init、add、doctor；自定义注册表和 registryDependencies | features-registry-cli |
| Blocks | 认证 Blocks、Clerk 集成、通过 CLI 添加 Blocks | features-blocks |
最佳实践
| 主题 | 描述 | 参考 |
|---|---|---|
| 添加组件 | 优先使用 CLI、PortalHost 放置、路径别名、cn 辅助函数、手动复制 | best-practices-adding-components |
| 故障排查 | doctor、--log-level all、PortalHost、别名、依赖项 | best-practices-troubleshooting |
评论
支持 Markdown