一个全面的最佳实践集合，旨在构建具有优化动画和 UI 模式的高性能 React Native 和 Expo 应用程序。
安装与下载
1. ClawHub CLI
从源直接安装技能的最快方式。
npx clawhub@latest install vercel-react-native-skills
2. 手动安装
将技能文件夹复制到以下位置之一
~/.openclaw/skills/ <project>/skills/ 优先级：工作区 > 本地 > 内置
3. 提示词安装
将此提示词复制到 OpenClaw 即可自动安装。
请帮我使用 Clawhub 安装 vercel-react-native-skills。如果尚未安装 Clawhub，请先安装（npm i -g clawhub）。
更倾向于下载？
获取包含原生技能文件的ZIP压缩包。
什么是 Vercel React Native 技能？
此技能提供了一个专家级的框架，用于使用 React Native 和 Expo 开发移动应用程序。它专注于通过执行严格的性能、动画和原生平台集成规则来提供流畅的用户体验。通过利用这些 Openclaw 技能，开发人员可以确保其移动项目符合 Vercel 对代码质量和效率的高标准。
该技能涵盖了从关键列表虚拟化到高级 Monorepo 配置的所有内容。它旨在引导开发人员了解移动开发的细微差别，例如管理桥接、优化图像渲染以及利用 GPU 加速动画来防止掉帧。
Vercel React Native 技能 应用场景
- 使用 Expo 生态系统构建高性能移动应用程序。
- 使用 FlashList 解决大数据集中的滚动延迟和内存问题。
- 使用在 UI 线程上运行的 Reanimated 实现流畅的 60fps 动画。
- 从标准的基于 JavaScript 的导航迁移到原生堆栈导航器。
- 在 Monorepo 架构中管理复杂的原生依赖项。
Vercel React Native 技能 工作原理
- 分析 React Native 或 Expo 项目，以确定需要性能或架构优化的领域。
- 参考优先规则类别，从关键列表性能开始，逐步过渡到动画和 UI 模式。
- 实施具体的规则建议，例如用 Pressable 替换标准的 Touchable 组件，或利用 expo-image 实现更好的缓存。
- 应用特定于平台的 UI 模式（如原生上下文菜单和模态框），以增强应用程序的原生感。
- 根据 Openclaw 技能文档中提供的正确和错误代码示例验证实施情况。
Vercel React Native 技能 配置指南
要将这些最佳实践集成到您的开发工作流程中，请确保您的项目结构中包含该规则集。您可以参考各个 markdown 文件了解具体的实现细节。
# 访问列表性能指南
cat rules/list-performance-virtualize.md
# 查看完整的编译后最佳实践
cat AGENTS.md
确保您的项目已配置 Expo 或 React Native，并已安装 Reanimated 和 FlashList 等依赖项，以利用高优先级的性能规则。
Vercel React Native 技能 数据架构与分类体系
该技能利用结构化的优先级系统，根据规则对应用程序质量和性能的影响对规则进行分类。
| 优先级 | 类别 | 影响 | 规则前缀 |
|---|---|---|---|
| 1 | 列表性能 | 关键 | list-performance- |
| 2 | 动画 | 高 | animation- |
| 3 | 导航 | 高 | navigation- |
| 4 | UI 模式 | 高 | ui- |
| 5-8 | 状态、渲染、Monorepo、配置 | 中/低 | 各类 |
每条规则都记录了性能影响说明、常见错误示例以及推荐的解决方案。
Vercel React Native 技能 高级特性
- 集成 FlashList 以优化大型复杂数据列表的虚拟化。
- 绑定 GPU 的动画规则，将属性限制为变换（transform）和透明度（opacity）以获得最高性能。
- 通过用于字体和原生模块配置的 Expo 配置插件（Config Plugins）进行原生平台优化。
- 支持 React 编译器，针对 Reanimated 共享值和函数解构进行特定处理。
- 高级 Monorepo 管理策略，确保多个包之间的原生依赖一致性。
SKILL.md
加载中
Openclaw 相关技能
PCEC-EvoMap Integrator
一个用于 PCEC 和 EvoMap 的深度集成工具，可自动执行错误信号查询、工作流复用和协作赏金任务处理。
精选*
