easy-vibe：用 React Native 和 Expo 从零打造门店巡检应用，从空白项目到 Android、iOS 与 Web 三端可用

easy-vibe：用 React Native 和 Expo 从零打造门店巡检应用，从空白项目到 Android、iOS 与 Web 三端可用

【免费下载链接】easy-vibe从 0 到 1 学会 vibe coding，项目制学习项目地址: https://gitcode.com/datawhalechina/easy-vibe

这篇指南来自 easy-vibe 项目「进阶开发」阶段中跨平台开发模块的 React Native + Expo 实战课程。你将跟随一个真实业务场景——连锁门店每天检查照明、价签、货架通道与安全出口——从创建一个空白的 Expo 项目开始，逐步完成门店巡检应用的第一版：搭建巡检首页、让任务可勾选、把现场问题保存在本机，并理解 Expo Go、Development Build 与真机验证的完整边界。读完这篇指南，你将掌握 React Native + Expo + TypeScript 从建项目、写页面、做本地持久化，到为 Android、iOS 和 Web 三端分别验证的一整套可复制的实战方法。

1. 每件工具各负责什么

门店巡检应用需要在 Android、iPhone 和浏览器中打开：店员用它查看任务、更新完成进度，并记录现场发现的问题。这个目标由三件工具分工完成：

• React Native：使用 React 和 TypeScript 创建 Android 与 iOS 的原生界面；
• Expo：负责创建项目、提供开发服务器、封装常用的设备 API（拍照、相册、安全存储、本地数据库等），以及后续的打包与更新；
• TypeScript：编写页面所使用的语言，让页面逻辑具备类型检查能力。

三者之间的关系可以这样理解：中间是要创建的项目，项目保存页面和功能；React Native 负责把页面显示到 Android 和 iPhone 上；Expo 负责启动项目，并在以后把它制作成可安装的测试应用。同一套页面也可以直接在浏览器中打开。Android、iPhone 和浏览器可以共用主要代码，但各自的运行结果仍然要分别打开和检查——这是整个课程反复强调的原则。

开发环境需要准备什么

在浏览器中打开第一版，只需要两样工具：

• Node.js：让电脑能够运行项目工具。安装页面里看到 LTS 时选择它即可，LTS 表示维护时间较长的稳定版本；
• 代码编辑器：用来打开项目并与 AI 一起修改文件，Trae、VS Code 等都可以。

浏览器版本完成后，要运行 Android 需要使用Android Studio，运行 iPhone 需要使用Xcode（仅限 macOS）。验证本课程所使用的环境为 Node.js 22.14 和 Expo SDK 57；SDK 是 Expo 提供的一套开发能力，创建新项目时使用工具给出的当前版本即可。

2. 三个已经落地的真实产品

这门课程用三个真实案例说明 React Native 与 Expo 在不同业务里的用法，也直接指导了巡检应用的界面与架构决策。

Shopify POS：门店经营场景的零售平台

Shopify POS 通常放在收银台，或者拿在店员手里：结账时收款、找商品时查库存、退换货时调出订单和顾客资料。门店忙起来以后，这些操作必须连得上、找得到，也不能让店员在几个系统之间来回切换。

关键经验在于：Shopify 在正式采用 React Native 以前，专门用性能较低的 Android 设备做过实验——开发者电脑上运行流畅，不代表门店里的旧设备也能顺畅使用。这对巡检首页的直接启发是信息顺序：先显示门店和班次，再显示完成进度、待办任务和现场问题，店员打开页面就能看到当天的巡检状态。

Discord：社区交流平台的多端复用

Discord 是一个社区交流平台，用户会在里面聊天、加入语音频道、管理成员和设置不同角色。原来它分别维护 Android 和 iPhone 两套应用，新功能经常不能同时到达两边；改用 React Native 后，两边可以共用更多页面和功能，但返回手势、字体和系统习惯仍然分别处理。

对巡检应用的启发是：页面主体内容可以跨端共用，但仍要在 Android 和 iPhone 上分别打开检查。

MTA TrainTime：公共交通场景下的 Expo 实践

纽约大都会运输署 MTA 用 Expo 开发 TrainTime 等出行应用。乘客可能在赶车时查下一班列车、在站台上买票、上车后再向工作人员出示车票，这些操作都发生在时间紧、网络环境不断变化的通勤途中。

MTA 团队使用了 Expo 提供的打包和更新服务：打包是把开发中的项目做成可安装的测试应用；更新是把已经确认的小修改直接送到用户设备。遇到严重问题时，他们可以很快发布修复。对巡检应用的启发是：发布时要区分开发中的页面、给同事使用的测试版和公开提供给用户的正式版。

3. 创建项目并搭出巡检列表

创建空白项目

新建一个空目录，用 AI 编程工具打开，然后说：

请创建一个名为 store-inspection 的 Expo TypeScript 项目。

也可以直接执行 Expo 官方脚手架：

npx create-expo-app@latest store-inspection cd store-inspection npm run web

如果希望显式使用 TypeScript 空白模板，课程中的原始版本推荐以下三行命令：

npx create-expo-app@latest store-inspection --template blank-typescript cd store-inspection npx expo start

这里的三行命令分别表示：创建项目、进入项目目录、启动项目。终端出现二维码以后，按W键打开浏览器；看到空白页面，就说明项目已经成功启动。如果项目没有启动，把错误信息交给 AI：

Expo 没有启动，错误是【粘贴错误】。请只修复启动问题。

用 AI 分步搭出巡检首页

不要一次性让 AI 生成整个应用，而是按下面的顺序逐步确认：

1. 先从一张很简单的首页开始，只放门店名称和班次：

请把首页标题改成“门店巡检”，并显示门店名称和班次。

2. 页面能正常打开以后，再加入任务：

请在首页加入四项巡检任务，先用演示数据。

3. 任务显示正常后，补上完成进度和“现场问题”区域（先用静态内容）：

请显示巡检完成进度，并在任务列表下面加入“现场问题”区域。

下面的截图来自本次创建的 Expo 项目，页面实际运行在浏览器中，顶部显示门店与班次，中部是完成进度和任务列表：

浏览器窗口变窄后，内容应该变成手机宽度，按钮和文字不能挤在一起（课程中保留了一张 窄屏布局截图 用于检查窄窗口下的排列；注意这张图只用于检查布局，Android 和 iPhone 的运行结果仍要在对应设备中验证）。

界面不满意时，不要让 AI 全部重写，而是给出收敛指令：

首页信息太多。保留门店、进度、巡检项目和现场问题，其他先删掉。

让巡检任务可以勾选

静态页面顺眼以后，先让任务可以勾选：

请让巡检任务可以勾选和取消。

确认四项任务都能正常点击以后，再处理顶部的进度：

请让完成进度根据已勾选的任务数量变化。

现在逐项点击验证：勾选一项，进度增加；取消勾选，进度减少。先把这条最基本的交互测通。如果数字变化不对：

我勾选一项后进度错误。请只修复进度计算，不改页面样式。

让店员记录现场问题

任务可以勾选以后，再给店员一个记录问题的地方，依然分三步：

1. 加入输入框和保存按钮：

请在“现场问题”区域加入输入框和保存按钮。

2. 处理空内容：

没有填写内容时不要保存，并在输入框下面提示“请填写现场问题”。

3. 处理保存成功的结果：

保存后清空输入框，并把刚才的内容显示在下面。

课程记录了一次真实操作：勾选“检查安全出口”以后，进度从1/4变成2/4；输入“消防通道有纸箱，已通知值班员移走”并保存，记录出现在页面，输入框也恢复为空。保存成功后的界面如下：

文字记录完成后，就可以使用 Expo 的 ImagePicker 拍照与相册工具增加照片记录，这一步会在第五节展开。

4. 把记录保存在本机

到目前为止，记录只停留在当前页面里——刷新页面或关闭应用以后，它很可能就消失了。这一阶段的完成标准是：再次打开应用时，刚才的进度和记录还在。

请把巡检进度和现场记录保存在本机。

改完以后，按下面的顺序检查：

1. 勾选两项巡检任务；
2. 保存一条现场问题；
3. 完全关闭应用；
4. 重新打开，确认刚才的数据还在。

AI 很可能会选择AsyncStorage来实现。它像应用自己的小记事本，适合保存少量数据。当记录数量增加并需要搜索和分类时，应该换成 Expo 的本地数据库expo-sqlite。

存储方案	适用场景	选择依据
AsyncStorage	少量键值数据	第一版起步最简单，保存进度和少量记录
expo-sqlite	数据量增大、出现关系	巡检记录、明细、待办之间存在关联，需要搜索和分类

课程原文的判断标准是：AsyncStorage适合少数几个值；当巡检记录、明细和待办工作之间出现关系时，expo-sqlite是更好的选择。这一阶段先不要连接服务器，本地持久化是后续一切同步功能的前提。

5. 照片和服务器同步：放到后面做

为不完整的检查点附加照片

允许为未完成的项目附加一张照片，支持预览和删除。

这一步对应 Expo 的 ImagePicker 模块。课程的做法是先完成本地文字记录、确认数据能持久化，再引入拍照与相册能力。

接入登录与门店权限

连接现有登录系统，只显示服务器分配给这家门店的数据。

当需要把记录同步到服务器时，课程建议从一条记录开始，而不是一开始就做完整同步：

1. 先让 AI 列出所需条件：

我想把巡检记录同步到服务器。请先告诉我最少需要准备什么，不要修改代码。

2. 准备好服务器地址以后，只让 AI 做上传功能：

请先实现“上传一条巡检记录”。

3. 上传成功时，页面显示“已同步”；上传失败时，本机记录仍然要保留。分别测试一次成功和一次失败，确认结果看得懂，再继续增加自动重试。

一条记录上传成功后，再依次增加登录、门店权限、图片上传和不同账号的数据隔离。

安全与离线同步的边界

课程给出了两条明确的安全原则：

• 把移动端 token 保存在SecureStore中；
• 绝不把公司机密放进应用代码或EXPO_PUBLIC_环境变量里（EXPO_PUBLIC_前缀的变量会打进客户端包，对用户可见）。

离线同步（离线优先）只有在本地保存和 API 都工作正常之后再添加。此外，权限控制必须落到实处：页面上隐藏某个入口不算权限控制，服务器也必须拒绝越权读取。课程用一个交接班场景验证这一点：如果已经接入服务器，用两个测试账号重复一次交接，账号 B 应该能看到同一家门店允许共享的交接记录，但不能看到其他门店的数据。

6. 在真实设备上完成与验证

Expo Go 与 Development Build

• Expo Go是大家共用的体验工具，适合查看第一版页面。在 Android 真机上安装 Expo Go 后，用它扫描终端里的二维码即可打开当前项目。
• 项目继续开发、需要使用自己写的原生功能以后，就要制作一个只属于当前项目的测试应用，也就是Development Build。

先问清楚本机还缺什么：

请列出配置 Development Build 前需要准备的内容，不要修改项目。

准备完成以后再说：

请为当前项目配置 Development Build。

Expo 可以在本机制作测试应用，也可以使用它的云端打包服务（使用云端服务需要 Expo 账号）。测试应用安装成功后，公开发布还需要 App Store 或 Google Play 的开发者账号。开发版安装到真机以后，再测试相机、照片、通知、离线恢复和后台切换——模拟器能打开，不代表这些设备能力已经完成。

分别在 Android、iPhone 和浏览器中打开

浏览器版本运行成功后，保持项目运行，并分别在三个目标平台中验证：

Android

安装 Android Studio 后，在里面创建并启动一台虚拟手机，回到 Expo 终端按A；也可以在 Android 真机上用 Expo Go 扫描二维码。完成标准包括三项：应用可以打开、系统返回键可以使用、输入框不会被键盘挡住。

iPhone

Xcode 只能安装在 Mac 上。安装完成后，还要在 Xcode 设置里下载一套 iPhone 模拟系统；启动模拟 iPhone 后，回到 Expo 终端按I。检查顶部内容有没有被刘海挡住、返回手势能不能使用、输入框会不会被键盘挡住。浏览器窄屏截图不能作为 iPhone 验证结果。

浏览器

按W后检查鼠标与键盘操作、浏览器刷新和窄屏布局。准备发布网页时，再生成可以放到网站服务器上的文件：

npx expo export --platform web

发布前的检查清单与自动化测试

在公开发布之前，课程要求至少在 Android 和 iPhone 上测试这些场景：键盘、权限、照片、重启、弱网、重试、退出登录、应用更新。

同时，可以给已经跑通的小功能补自动测试，一次只测一件事：

请测试：勾选一项任务后，完成进度会增加。

请测试：现场问题为空时不能保存。

这种由程序自动重复检查的过程叫作“自动测试”，先用它守住简单规则；相机、权限和手机性能仍然要在真机上检查。准备给同事试用时，先做内部版本（不会直接出现在应用商店里），Android 和 iOS 分开准备：

请告诉我生成 Android 内部测试版需要准备什么。

请告诉我生成 iOS 内部测试版需要准备什么。

本次验证的实际边界

课程明确记录了验证环境的真实范围，这也是一个值得学习的工程习惯：本课程原型使用Expo SDK 57、TypeScript 和一次真实的 Web 导出验证完成；由于测试机没有可启动的 Android 虚拟手机，也没有下载 iPhone 模拟系统，因此没有把 Android 和 iPhone 写成“已验证”，更没有用浏览器截图代替手机截图，也不声称移动端编译和签名已经完成。

进一步探索当前仓库

• 本教程属于 easy-vibe 跨平台开发模块，完整模块导航见 docs/es-es/stage-3/index.md（进阶开发 · 跨平台开发，涵盖小程序、Android、iOS、PWA、Electron 等 16 个方向）；
• 本课程的中文完整版包含 13 个步骤（含交接班模拟、真实用户试用等更细的实践环节），见 docs/zh-cn/stage-3/cross-platform/react-native-expo/index.md；
• 课程截图与架构图资源位于 docs/zh-cn/stage-3/cross-platform/react-native-expo/images/。

【免费下载链接】easy-vibe从 0 到 1 学会 vibe coding，项目制学习项目地址: https://gitcode.com/datawhalechina/easy-vibe