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 57SDK 是 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-applatest store-inspection cd store-inspection npm run web如果希望显式使用 TypeScript 空白模板课程中的原始版本推荐以下三行命令npx create-expo-applatest store-inspection --template blank-typescript cd store-inspection npx expo start这里的三行命令分别表示创建项目、进入项目目录、启动项目。终端出现二维码以后按W键打开浏览器看到空白页面就说明项目已经成功启动。如果项目没有启动把错误信息交给 AIExpo 没有启动错误是【粘贴错误】。请只修复启动问题。用 AI 分步搭出巡检首页不要一次性让 AI 生成整个应用而是按下面的顺序逐步确认先从一张很简单的首页开始只放门店名称和班次请把首页标题改成“门店巡检”并显示门店名称和班次。页面能正常打开以后再加入任务请在首页加入四项巡检任务先用演示数据。任务显示正常后补上完成进度和“现场问题”区域先用静态内容请显示巡检完成进度并在任务列表下面加入“现场问题”区域。下面的截图来自本次创建的 Expo 项目页面实际运行在浏览器中顶部显示门店与班次中部是完成进度和任务列表浏览器窗口变窄后内容应该变成手机宽度按钮和文字不能挤在一起课程中保留了一张 窄屏布局截图 用于检查窄窗口下的排列注意这张图只用于检查布局Android 和 iPhone 的运行结果仍要在对应设备中验证。界面不满意时不要让 AI 全部重写而是给出收敛指令首页信息太多。保留门店、进度、巡检项目和现场问题其他先删掉。让巡检任务可以勾选静态页面顺眼以后先让任务可以勾选请让巡检任务可以勾选和取消。确认四项任务都能正常点击以后再处理顶部的进度请让完成进度根据已勾选的任务数量变化。现在逐项点击验证勾选一项进度增加取消勾选进度减少。先把这条最基本的交互测通。如果数字变化不对我勾选一项后进度错误。请只修复进度计算不改页面样式。让店员记录现场问题任务可以勾选以后再给店员一个记录问题的地方依然分三步加入输入框和保存按钮请在“现场问题”区域加入输入框和保存按钮。处理空内容没有填写内容时不要保存并在输入框下面提示“请填写现场问题”。处理保存成功的结果保存后清空输入框并把刚才的内容显示在下面。课程记录了一次真实操作勾选“检查安全出口”以后进度从1/4变成2/4输入“消防通道有纸箱已通知值班员移走”并保存记录出现在页面输入框也恢复为空。保存成功后的界面如下文字记录完成后就可以使用 Expo 的 ImagePicker 拍照与相册工具增加照片记录这一步会在第五节展开。4. 把记录保存在本机到目前为止记录只停留在当前页面里——刷新页面或关闭应用以后它很可能就消失了。这一阶段的完成标准是再次打开应用时刚才的进度和记录还在。请把巡检进度和现场记录保存在本机。改完以后按下面的顺序检查勾选两项巡检任务保存一条现场问题完全关闭应用重新打开确认刚才的数据还在。AI 很可能会选择AsyncStorage来实现。它像应用自己的小记事本适合保存少量数据。当记录数量增加并需要搜索和分类时应该换成 Expo 的本地数据库expo-sqlite。存储方案适用场景选择依据AsyncStorage少量键值数据第一版起步最简单保存进度和少量记录expo-sqlite数据量增大、出现关系巡检记录、明细、待办之间存在关联需要搜索和分类课程原文的判断标准是AsyncStorage适合少数几个值当巡检记录、明细和待办工作之间出现关系时expo-sqlite是更好的选择。这一阶段先不要连接服务器本地持久化是后续一切同步功能的前提。5. 照片和服务器同步放到后面做为不完整的检查点附加照片允许为未完成的项目附加一张照片支持预览和删除。这一步对应 Expo 的 ImagePicker 模块。课程的做法是先完成本地文字记录、确认数据能持久化再引入拍照与相册能力。接入登录与门店权限连接现有登录系统只显示服务器分配给这家门店的数据。当需要把记录同步到服务器时课程建议从一条记录开始而不是一开始就做完整同步先让 AI 列出所需条件我想把巡检记录同步到服务器。请先告诉我最少需要准备什么不要修改代码。准备好服务器地址以后只让 AI 做上传功能请先实现“上传一条巡检记录”。上传成功时页面显示“已同步”上传失败时本机记录仍然要保留。分别测试一次成功和一次失败确认结果看得懂再继续增加自动重试。一条记录上传成功后再依次增加登录、门店权限、图片上传和不同账号的数据隔离。安全与离线同步的边界课程给出了两条明确的安全原则把移动端 token 保存在SecureStore中绝不把公司机密放进应用代码或EXPO_PUBLIC_环境变量里EXPO_PUBLIC_前缀的变量会打进客户端包对用户可见。离线同步离线优先只有在本地保存和 API 都工作正常之后再添加。此外权限控制必须落到实处页面上隐藏某个入口不算权限控制服务器也必须拒绝越权读取。课程用一个交接班场景验证这一点如果已经接入服务器用两个测试账号重复一次交接账号 B 应该能看到同一家门店允许共享的交接记录但不能看到其他门店的数据。6. 在真实设备上完成与验证Expo Go 与 Development BuildExpo 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 扫描二维码。完成标准包括三项应用可以打开、系统返回键可以使用、输入框不会被键盘挡住。iPhoneXcode 只能安装在 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考