react-native-reusables

Name: react-native-reusables
Author: maikotrindade

github.com/maikotrindade设计与 UI1348 次安装1 天前更新

关于 react-native-reusables

React Native Reusables 将类似 shadcn/ui 的组件工作流带到 React Native，支持复制组件或通过 CLI 搭建。内容涵盖 NativeWind 与 Uniwind 主题、RN Primitives、表单、覆盖层和可复用区块。

主要功能

01可复制及 CLI 搭建组件
02CSS 变量主题
03表单与控件组件
04覆盖层与 Portal 模式
05注册表与 CLI 工作流
06身份验证区块

适用场景

01为 React Native 应用添加可复用 UI 组件
02设置带主题的表单和控件
03构建对话框等覆盖层

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/maikotrindade/awesome-react-native-skills --skill react-native-reusables

安装后在 Claude Code 中输入/react-native-reusables确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/

best-practices-adding-components.md

best-practices-troubleshooting.md

core-customization.md

core-installation.md

core-overview.md

features-blocks.md

features-components-overview.md

features-forms-controls.md

features-overlays-portals.md

features-registry-cli.md

features-text-and-icons.md

详细介绍

React Native Reusables

面向 NativeWind v4、Expo SDK 52+ 和 Expo Router v4。有关 Expo SDK 工具，请参阅 react-native-expo 技能。有关独立的状态管理和导航模式，请参阅 react-native-ecosystem 技能。

React Native Reusables 将 shadcn/ui 的使用体验带到了 React Native：组件可直接复制粘贴或通过 CLI 脚手架生成，使用 CSS 变量实现主题，并在底层采用 RN Primitives。它支持 NativeWind 和 Uniwind，覆盖层需要根级 PortalHost，并使用 Text 继承系统和用于 Lucide 的 Icon 包装器。

核心参考

主题	描述	参考
概览	RNR 是什么，以及与 shadcn/ui 的差异（Portal、无级联、图标等）	core-overview
安装	CLI 初始化与手动设置、添加组件、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、react-hook-form 集成	features-forms-controls
覆盖层和 Portal	PortalHost、Dialog/Popover/SelectContent、contentInsets	features-overlays-portals
Registry 和 CLI	init、add、doctor；自定义 registry 和 registryDependencies	features-registry-cli
区块	身份验证区块、Clerk 集成、通过 CLI 添加区块	features-blocks

最佳实践

主题	描述	参考
添加组件	优先使用 CLI、PortalHost 的放置位置、路径别名、cn 辅助函数、手动复制	best-practices-adding-components
故障排除	doctor、--log-level all、PortalHost、别名、依赖项	best-practices-troubleshooting

关键建议

任何覆盖层都必须使用 PortalHost（Dialog、DropdownMenu、Popover、Tooltip）——将它放在根布局的最后
使用 CLI（npx react-native-reusables add <name>），确保原语和路径配置正确
Button 内的文本——始终将来自 @/components/ui/text 的 <Text> 作为直接子元素，以便 TextClassContext 应用变体样式
图标——使用 <Icon as={LucideIcon} />，而不是为每个图标单独添加包装器
NativeWind v4——在 global.css 中使用 .dark:root（而不是 .dark）定义深色模式 CSS 变量
手动设置后或遇到问题时，先运行 doctor，再判断是否为 bug

支持 Markdown

登录后评论