Resources 实施手册

# React Native 架构实施手册 此文件包含技能所引用的详细模式、检查清单和代码示例。 # React Native 架构 适用于 Expo 的 React Native 开发生产级模式，涵盖导航、状态管理、原生模块及离线优先架构。 ## 何时使用此技能 - 启动新的 React Native 或 Expo 项目时 - 实现复杂的导航模式时 - 集成原生模块和平台 API 时 - 构建离线优先的移动应用程序时 - 优化 React Native 性能时 - 为移动端发布设置 CI/CD 时 ## 核心概念 ### 1. 项目结构 src/ ├── app/ # Expo Router 屏幕 │ ├── (auth)/ # 认证组 │ ├── (tabs)/ # 标签导航 │ └── _layout.tsx # 根布局 ├── components/ │ ├── ui/ # 可复用 UI 组件 │ └── features/ # 功能特定组件 ├── hooks/ # 自定义 Hook ├── services/ # API 和原生服务 ├── stores/ # 状态管理 ├── utils/ # 工具函数 └── types/ # TypeScript 类型 ### 2. Expo 与原生 React Native (Bare RN) 对比 | 特性 | Expo | 原生 RN | |---------|------|---------| | 设置复杂度 | 低 | 高 | | 原生模块 | EAS Build | 手动链接 | | OTA 更新 | 内置 | 手动设置 | | 构建服务 | EAS | 自定义 CI | | 自定义原生代码 | 配置插件 | 直接访问 | ## 快速开始 bash # 创建新的 Expo 项目 npx create-expo-app@latest my-app -t expo-template-blank-typescript # 安装必要依赖 npx expo install expo-router expo-status-bar react-native-safe-area-context npx expo install @react-native-async-storage/async-storage npx expo install expo-secure-store expo-haptics typescript // app/_layout.tsx import { Stack } from 'expo-router' import { ThemeProvider } from '@/providers/ThemeProvider' import { QueryProvider } from '@/providers/QueryProvider' export default function RootLayout() { return ( ) } ## 模式 ### 模式 1：Expo Router 导航 typescript // app/(tabs)/_layout.