Skip to main content

2天实战课程：ReactNative / Expo开发App

Contents​

前提和假设​

根据从组织方了解的信息，本课程对象均为资深开发者，且有一定前端和移动端开发经验。 我们假设大家对Web网站开发、JavaScript/TypeScript，CSS都有实战经验，并且熟悉React或类似MVVM框架。

课程性质和目的​

由于这次课程安排只有2天左右时间，性质上不是ReactNative的系统培训，不能按部就班。 本课程是针对性较强的实用App开发介绍，需要突出RN的特点，又要强调操作性。 讲座人将根据自身经验，提供一条进入实战开发的高效路线，为同学们避坑，防止过多弯路，让之前未深入接触过ReactNative的同学们快速进入状态。 所有资料和代码都会在GitHub分享。

学习准备​

  • 提前复习JavaScript/TypeScript、CSS和React的基础知识，对React hooks能有所了解为佳。
  • 思考自己面对的项目特点，及其在Android和iOS设备上表现的形式，包括导航、风格、所需调用的服务、原生资源等。
  • 安装配置Node.js环境，建议用nvm、npx等命令行工具来操作，最好安装yarn。
  • 准备你的开发电脑，性能无要求，但强烈建议MacOs。（本课程我们基本都以MacOs环境来演示和编程）
  • 开发工具用VsCode。

内容安排​

day 1

1. ReactNative特点​

ReactNative是什么？能做什么？不能做什么？同类型框架对比。 和Expo的关系？路线选择。 需要的相关知识储备和最佳学习路线。

第一天的主要内容，基于Bare ReactNative (非Expo)进行

2. 导航、布局、风格、组件、钩子​

由于时间有限，以下内容难度不大，均快速过，可交流

flex布局，和Web的区别？ StyleSheet，探讨tailwind和css等。 各种导航方式，及其在Android和iOS区别。 组件和勾子简单说明。

3. 全局状态管理和持久化​

用什么全局管理组件？ 本地化状态存储和状态管理的例子。

4. 案例和操作​

一个简单读取远程api获取电影/图片信息的应用，有明暗2种风格切换，可以记录用户喜好并实时存储。

day 2

1. Expo特点​

为什么强烈推荐新项目开发采用Expo？ 优缺点说明。

2. Expo Router​

导航设计和动态路径。

3. EAS和expo cli打包和调试​

由于部分功能需要真实环境，仅演示，不要求马上操作。

expo常用命令。 Expo Application Services服务介绍。

4. 实战案例​

仿ChatGPT做一个AI聊天App，需调用第三方服务。（有一定难度，根据课程实际进度，看可以做到什么深度。）

扩展内容​

由于时间有限，一部分非常实用的内容，只能在上述基本课程之外进行安排，如有兴趣可考虑另行安排时间讲解和交流。

如下：

  • 多语言的最佳实践。
  • 数据库Sqlite。
  • 变现：内购、订阅和广告的最佳实践。
  • Reanimated动画效果。
  • iOS和GoolgPlay上架发布流程。

... 等等。