SuperAPI AI 工具集

react-native-reusables

前端与建站

查看项目

更新于 10-16 00:03

技能介绍

用途:React Native Reusables(RNR)把 shadcn/ui 的体验引入 React Native,提供可复制粘贴或经 CLI 脚手架生成的组件,通过 CSS 变量实现主题化,底层使用 RN Primitives。面向 NativeWind v4、Expo SDK 52+ 与 Expo Router v4。

主要能力:组件涵盖 Button、Input、Dialog 等,支持 variants、asChild 与复合组件;表单控件包括 Label、Input、Select、Checkbox、RadioGroup,并可集成 react-hook-form;覆盖层与 Portal 支持 Dialog、Popover、SelectContent、DropdownMenu、Tooltip,并提供 contentInsets;文本与图标方面有 TextClassContext 继承和基于 Lucide 的 Icon 包装;还提供 Auth blocks 与 Clerk 集成,以及注册表与 CLI(init、add、doctor,支持自定义 registry 与 registryDependencies)。

使用方式:推荐用 CLI 添加组件,例如 npx react-native-reusables add <name>,以便正确接线 primitives 与路径;任何覆盖层都必须在根布局最后放置 PortalHost;Button 内的文本应始终使用来自 @/components/ui/text 的 <Text> 作为直接子元素,使 TextClassContext 应用 variant 样式;图标使用 <Icon as={LucideIcon} />;NativeWind v4 的 global.css 中深色模式 CSS 变量应使用 .dark:root 而非 .dark;手动设置后或出错时可运行 doctor,并配合 --log-level all 排查。

适用场景:使用 Expo 构建应用并希望以复制粘贴方式获得可定制 UI 组件的项目。

限制:资料未提供收费、价格、平台支持范围或效果数据;具体安装步骤、components.json、global.css、tailwind.config、theme.ts 等细节需参考对应文档,本文未展开。