mcpField
U
using-reacticx

using-reacticx

github.com/rit3zh设计与 UI1.5k108 次安装5 周前更新
代码仓库

关于 using-reacticx

用于使用 Reacticx 的技能；该组件库包含 163 个动画和手势驱动的 React Native 与 Expo 组件，可复制为项目内可编辑源码。内容涵盖面向开发者和 Agent 的 CLI 与 MCP 工作流。

主要功能

  1. 01将组件复制到项目源码
  2. 02按项目别名重写导入
  3. 03解析组件依赖
  4. 04查看类型与示例
  5. 05覆盖前检查注册表差异

适用场景

  1. 01为 Expo 应用添加动画组件
  2. 02集成前检查组件属性
  3. 03写入前预览文件
  4. 04避免覆盖本地修改的组件

MCP 相关

Reacticx 除 CLI 外还提供 MCP 服务 @reacticx/mcp。该服务通过结构化工具读取组件注册表并向项目添加组件。

安装

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

$npx skills add https://github.com/rit3zh/reacticx --skill using-reacticx

安装后在 Claude Code 中输入/using-reacticx确认已加载。

包含的文件

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

references/
cli.md
components.md
configuration.md
mcp.md

详细介绍

使用 Reacticx

概述

Reacticx 是一个适用于 React Native 和 Expo 的复制粘贴组件库：包含 163 个由动画和手势驱动的组件，这些组件会以源代码形式复制到项目中。无需安装运行时包，也无需从 node_modules 导入任何内容——组件加入项目后就是普通的项目代码，可自由编辑。

同一注册表的两种入口：

适用场景
CLI — npx reacticx <command>人在终端操作，或只需添加一次
MCP 服务 — @reacticx/mcp由 Agent 执行操作并需要结构化结果

两者读取同一注册表，写入同一 outDir，并以相同方式重写导入。选择当前会话已有的入口；任务进行中不要混用两者，除非先用 reacticx diff / diff_components 重新检查状态。

添加前须知

  1. 确认文件的放置位置。 npx reacticx config（或 get_config 工具）会打印解析后的配置，并填入所有默认值。如果项目没有 component.config.json，则会应用默认值——src/shared/components、分类目录结构、@/shared/components 别名——这通常不适合已有项目。请先运行 reacticx init / init_config。
  2. 确认组件尚未存在。 reacticx list 会显示注册表；list_installed_components（MCP）或查看 outDir，可以了解项目已有的组件。若传入 --overwrite，重复添加会静默丢弃本地修改。
  3. 接入前先阅读组件。 用 reacticx info <name> 查看结构，用 get_component_types 查看实际的属性类型，用 get_component_example 查看可运行的调用示例。猜测属性是导致无谓来回沟通的主要原因。

添加组件

npx reacticx add accordion                      # into the configured outDir
npx reacticx add accordion --dir src/components/ui   # somewhere else, once
npx reacticx add accordion --types --examples   # bring types and the demo screen
npx reacticx add accordion --dry                # show the plan, write nothing
npx reacticx add accordion --overwrite          # take the registry version

请使用 bunx、npx 或 pnpm dlx，与项目的包管理器保持一致。

除了复制文件外，add 还会：

  • 重写导入。 注册表源代码导入 @/components/...、@/utils/... 和 @/helpers/...。这些导入会根据 component.config.json 改写为项目自身的别名；如果没有合适的别名，则改用相对路径。
  • 处理依赖。 如果某个组件导入了其他注册表组件或共享辅助模块，也会一并添加。--no-deps 会关闭此功能；关闭后，除非你自行提供这些模块，否则复制的文件将无法编译。
  • 避免覆盖现有文件。 除非使用 --overwrite，否则会保留现有文件。
  • 验证每次下载的校验和。
  • 报告缺少的 npm 包并提供安装建议。MCP 服务会报告缺少的包，但不会安装——请运行它返回的命令。

添加后

  1. 安装所有缺少的包。优先使用 npx expo install <package>，而不是直接使用 npm install，这样可以确保版本与项目的 Expo SDK 匹配。
  2. 如果添加了任何原生内容，请重新构建原生目标（npx expo run:ios、 npx expo run:android）。仅重启 Metro 不够；这是新添加的组件在启动时崩溃最常见的原因。
  3. 从配置的别名导入，例如 import { Accordion } from "@/components/ui/molecules/accordion"。
  4. 进行类型检查和 lint。复制的源代码现在属于项目代码，必须遵守项目自身的规范。

值得了解的依赖信息

  • 几乎所有动画都使用 react-native-reanimated；其中 40 个组件还需要 react-native-worklets，它需要单独安装，因为 Reanimated 4 将 worklets 移到了独立的包中。
  • Skia 使用 @shopify/react-native-skia——45 个组件会用到它。
  • 模糊效果使用 @sbaiahmed1/react-native-blur，这是一个带作用域的 npm 包。不要 安装无作用域的 react-native-blur；那是另一个库。
  • 图标根据组件不同，来自 @expo/vector-icons、expo-symbols 或 @hugeicons/react-native。

references/components.md 列出了每个组件的确切依赖项。

常见错误

  • 在运行 init 之前添加组件，导致组件被放入 src/shared/components 下的某个项目并不存在的别名目录中。
  • 添加原生依赖后，跳过原生重建。
  • 使用 --overwrite 重新添加已在本地编辑过的组件。先运行 reacticx diff <name>，它会准确显示哪些内容将会丢失。
  • 传入 --no-deps，然后疑惑为什么导入无法解析。
  • 安装未加作用域的 react-native-blur。
  • 认为某个组件存在，只因为有名称相似的组件。编写导入语句前，先运行 reacticx list -s <term> ；如果拼写有误，CLI 会提示相近的名称。

参考资料

文件内容
references/components.md每个组件的信息：CLI 键、描述、文件、确切依赖项和文档 URL。由 scripts/skills/generate-catalog.ts 根据注册表、站点内容和组件源代码生成
references/cli.md每条 CLI 命令和标志，以及其背后的行为
references/mcp.mdMCP 服务：设置、全部 12 个工具、资源和 Agent 工作流
references/configuration.md每个 component.config.json 键、其作用以及路径解析方式

评论

支持 Markdown