react-native-architecture

概览

什么是 react-native-architecture？

react-native-architecture 提供了一个实用的蓝图，用于构建可扩展且适合生产环境的 React Native 移动应用。它聚焦于使用 Expo、高级导航、本地模块集成、离线优先模式以及稳健的项目结构。该技能专为希望加速应用交付并遵循最佳实践的前端开发者和移动团队设计。

谁适合使用此技能？

• 启动新的 React Native 或 Expo 项目的开发者
• 实现复杂导航或身份验证流程的团队
• 需要集成本地模块或平台 API 的项目
• 需要离线支持和可靠状态管理的应用
• 优化 React Native 性能或搭建移动端 CI/CD 的任何人

它解决了哪些问题

• 通过成熟的项目结构减少搭建时间
• 明确何时使用 Expo 与 Bare React Native
• 指导本地模块和平台 API 的集成
• 支持离线优先和跨平台开发
• 帮助维护可扩展且易维护的代码库

使用指南

安装步骤

1. 通过以下命令将技能添加到你的 agent：

   npx skills add https://github.com/wshobson/agents --skill react-native-architecture
   

2. 打开 SKILL.md 文件，了解整体概览和工作流程指导。
3. 查看 README.md、AGENTS.md 和 metadata.json 等辅助文件，获取更深入的背景信息。
4. 探索 rules/、resources/、references/ 和 scripts/ 目录，了解实现细节和辅助工具。

项目结构概览

推荐的结构包括：

• src/app/：Expo Router 页面，按导航类型组织（如 auth、tabs）
• src/components/：UI 及功能组件
• src/hooks/：自定义 React hooks
• src/services/：API 和本地服务集成
• src/stores/：状态管理逻辑
• src/utils/：工具函数
• src/types/：TypeScript 类型定义

Expo 与 Bare React Native 的区别

• Expo：更易搭建，管理本地模块，支持快速 OTA 更新
• Bare React Native：控制更细致，需手动链接本地模块，复杂度更高
  除非需要 Expo 不支持的自定义本地代码，否则大多数项目推荐使用 Expo。

如何适配此技能

建议不要直接复制文件，而是根据自己的代码库、工具链和团队规范，灵活调整架构和模式。

常见问题

react-native-architecture 的主要优势是什么？

它为 React Native 项目提供了清晰且可扩展的起点，减少搭建时间和技术负担。

可以在已有的 React Native 项目中使用吗？

可以，你可以逐步采用推荐的结构和模式，提升项目的可维护性。

这个技能只适用于 Expo 吗？

不是。虽然大多数场景推荐使用 Expo，但当需要自定义本地集成时，也支持 Bare React Native。

安装后从哪里开始？

先阅读 SKILL.md 文件了解整体，然后浏览文件树获取详细指导和示例。

如何查看所有可用文件和脚本？

使用 Files 标签浏览完整文件树，包括嵌套的引用和辅助脚本。