第一章：移动端开发概述——React Native + Expo + AI 工具

第一章：移动端开发概述——React Native + Expo + AI 工具

“React Native 的心智模型和 Web 开发高度一致。真正需要学习的只是平台特有的部分，AI 把这部分压缩到了极致。”

1.1 移动端 AI 工具全景

代码生成：

  • Cursor：React Native 支持质量与 Web React 相当
  • GitHub Copilot：TypeScript 代码补全

UI 生成：

  • v0（实验性）：React Native 输出模式
  • 更常见做法：用 v0 生成 Web 版，AI 转换为 RN 版本

1.2 React Native 新架构

flowchart
    A[旧架构] --> B[Bridge 异步]
    A --> C[JSON 序列化]
    B --> D[延迟高]
    E[新架构] --> F[JSI 同步]
    E --> G[Fabric 渲染器]
    E --> H[TurboModules]
    F --> I[零延迟]

新架构优势：

  • JSI：JS 直接调用 C++，同步零延迟
  • Fabric：并发渲染，类似 React 18
  • Hermes：冷启动 < 0.5s

1.3 Expo 架构选择

flowchart
    A[Managed Workflow] --> B[Expo 管理原生]
    A --> C[跳过配置]
    D[Bare Workflow] --> E[完全控制]
    D --> F[需要原生经验]
模式 特点 适用
Managed Expo 管理原生 大多数应用
Bare 完全控制 高度定制

1.4 与后端对接

移动端特有：

问题 方案
Token 存储 expo-secure-store（加密）
网络不稳定 请求重试 + 离线队列
后台上传 expo-task-manager

本章小结

  1. AI 工具：Cursor + Copilot + v0
  2. 新架构：JSI + Fabric + Hermes
  3. Expo：Managed Workflow 推荐起步
  4. 后端对接：加密存储 + 离线处理

本章提示词模板

生成 React Native 项目规范

为 React Native + Expo 项目创建 .cursorrules：

项目技术栈：
- Expo SDK 53
- React Native 0.78
- NativeWind（Tailwind）
- Expo Router
- TanStack Query

需要包含：
1. 组件规范（函数组件 + hooks）
2. 样式规范（NativeWind className）
3. API 调用规范
4. 状态管理规范
5. 平台检测规范

继续阅读：第二章：项目搭建