Skip to main content

React Native / Expo 移动端开发实战培训大纲

一、培训背景与目标​

本培训面向具备 Java 开发基础、但前端与移动端实战经验相对不足的研发人员，围绕 React Native / Expo 技术栈，通过连续的实操训练，帮助学员完成从“能看懂前端代码”到“能够独立完成移动端功能开发”的转变。

课程不追求知识点的全面覆盖，而是以“做出一个可以运行、可以继续扩展的 App 雏形”为目标，强调动手实践、阶段性交付以及讲师 Review。通过多轮修改和优化，帮助学员建立更贴近真实项目的前端开发习惯。

培训采用远程授课方式进行，课程之间可不连续安排，课后以作业和代码提交作为主要推进手段。

二、学员基础与环境准备说明​

学员知识储备建议​

  • 具备 HTML / CSS 基础
  • 对 React 有基本了解（有 Next.js 使用经验更佳）
  • 对 Android / iOS 的 UI 形态和交互方式有基本认知（有原生或混合开发经验更佳）

开发环境准备​

  • macOS + Xcode + Android Studio
    （无 macOS 设备亦可使用 Windows 环境，课程中不对环境配置细节做展开）
  • 编辑器：VS Code 或 Cursor
    （课程不依赖 AI Coding 工具，学员可自行选择是否使用）

三、课程设计原则​

  • 以一个完整的移动端应用为主线，贯穿全部课程
  • 理论与实操比例控制在约 3:7
  • 每一讲都有明确的功能产出和代码结果
  • 后端内容仅作为前端的数据来源示例，不作为重点教学方向
  • 通过作业与代码 Review，持续强化工程和产品意识

四、技术选型说明​

  • 移动端框架：React Native + Expo
  • 路由方案：Expo Router
  • 状态管理：Zustand
  • 本地数据持久化：AsyncStorage / SecureStore
    （如需使用 SQLite 等本地数据库方案，建议单独开设专题课程）
  • 后端演示接口：Node.js 轻量服务
    （如需系统性讲解 Next.js 或后端架构，建议单独开课）
  • 数据来源：模拟数据 / 示例接口，亦可对接学员已有的 SaaS 服务

五、课程安排（建议 7 讲）​

第 1 讲：用 React Native 快速做出第一个 App​

目标
尽快建立对移动端开发的直观认识，让应用在第一节课就能运行起来。

主要内容

  • React Native 的适用场景与边界
  • 使用 Expo 创建并运行项目
  • 页面是如何渲染出来的
  • 页面跳转与基础导航的实现方式

本次交付

  • 一个可运行的移动端应用
  • 至少包含 2 个页面及页面跳转

第 2 讲：让页面“动”起来​

目标
掌握页面交互的基本实现方式，让界面开始响应用户操作。

主要内容

  • 页面与组件的基本写法
  • 状态变化与界面更新的关系
  • 常见交互组件的使用方式
  • 用尽量少的代码完成一个完整的小功能

本次交付

  • 一个具备交互能力的业务页面
  • 支持简单的数据新增或修改

第 3 讲：对移动端 UI 的进一步优化​

目标
从“能用”提升到“好用”，让页面更接近真实产品。

主要内容

  • 常见移动端页面结构与布局方式
  • 页面拆分与复用的基本思路
  • 列表、空状态、加载状态的处理
  • 实际开发中容易踩到的移动端 UI 问题

本次交付

  • 一个结构清晰、体验完整的业务页面
  • 抽取并使用至少一个通用组件

第 4 讲：Node.js 配套服务实现​

目标
理解 Node.js 在前端项目中的常见用途，并实现一个为前端服务的轻量后端。

主要内容

  • Node.js 在前端开发中的典型使用场景
  • 使用 Node.js 快速搭建简单接口服务
  • 编写接口返回列表和详情数据
  • 前端调用接口并处理返回结果
  • 前后端在实际项目中的职责分工说明

本次交付

  • 一个可运行的 Node.js 服务
  • 前端应用通过接口获取数据并完成展示

第 5 讲：全局状态管理与本地数据保存​

目标
解决多页面数据共享和应用状态保存的问题。

主要内容

  • 为什么需要全局状态管理
  • 使用 Zustand 管理应用状态
  • 登录态与用户信息的管理方式
  • 应用状态的本地持久化与恢复

本次交付

  • 应用具备统一的全局状态管理
  • 登录状态可在多页面间共享，并在重启后保持

第 6 讲：把功能补完整​

目标
补齐关键功能细节，让应用更接近真实使用场景。

主要内容

  • 表单校验与异常处理
  • 加载状态与错误提示
  • 登录态控制与页面访问判断
  • 常见产品级问题的处理思路

本次交付

  • 一个功能流程完整的移动端应用雏形
  • 核心业务路径可以完整跑通

第 7 讲：成果展示与代码 Review（可选）​

目标
通过集中 Review，帮助学员建立更清晰的工程与产品视角。

主要内容

  • 学员项目演示
  • 代码结构与实现方式点评
  • 常见问题总结
  • React Native 项目的后续演进方向说明

本次交付

  • 完整的项目成果
  • 明确的优化与改进建议

六、培训成果​

完成培训后，学员将能够：

  • 使用 React Native 完成基础的 iOS / Android 应用功能开发
  • 理解前端页面、状态管理和数据流转的基本模式
  • 独立完成前后端配合的简单业务流程
  • 具备将前端项目作为工程进行维护和扩展的基础能力

最终交付成果为一个可运行的移动端应用项目及对应代码。