使用案例 · React Native Expo

用 Codex 和 Expo 做出可上机验收的 React Native 应用

从一个移动端核心流程开始,按 Expo Router 约定搭建页面和状态,并在真机或模拟器完成可重复验收。

第一版的交付物是一个可运行的 Expo 项目。用户能在指定真机或模拟器打开应用,进入主流程,看到加载、空、成功和失败状态,并返回起点再次完成。仓库还要保留依赖安装方式、启动命令、目标设备条件和验收记录。只在浏览器里看到一个相似页面,不足以证明移动端应用已经完成。

先备齐真实运行条件

本机需要 Node.js LTS 和可用的包管理器。最快的入门路径还需要一台已经安装 Expo Go、且能连接开发服务器的 iOS 或 Android 真机。Android 模拟器需要 Android Studio 和已启动的虚拟设备。iOS Simulator 只能在 macOS 上使用,并需要 Xcode 与对应模拟器运行时。

Expo Go 适合快速学习和验证基础流程,它支持的原生能力有限。项目需要自定义原生模块、原生配置或准备正式发布时,应切到 development build。真机开发还会碰到局域网、防火墙、系统权限和设备版本,开始前就把目标平台与设备写清。

桌面端 Codex 或 CLI 可以安装 Expo 插件,IDE extension 用户则改用 Expo 官方 Skills 或 MCP。让任务遵循 Expo Router、依赖安装和构建约定。准备应用目标、用户、核心流程、离线要求、数据来源和视觉参考。第一版只选一个能走完的完整流程,账户、支付、推送等高成本能力另列里程碑。

创建项目前先确认包名、显示名称和支持平台,避免后面同时改路由、权限与原生标识。已有代码库要先阅读 app.json 或动态配置、SDK 版本和锁文件。新项目则记录创建命令和模板,验收者才能在依赖损坏时重建环境。

用 Codex 和 Expo 做出可上机验收的 React Native 应用的入口、目标与准备条件操作示意图
图 1 · 进入任务前先确认目标、范围和准备条件

用 Expo Router 建立最小骨架

先按验收客户端选择兼容的 Expo SDK。使用 Expo Go 时选择它当前支持的版本,否则改用 development build。让 Codex 用 create-expo-app 的默认模板开始。SDK 55 或更高的默认模板先检查 src/app,旧版或自定义项目也可能使用 app。Expo Router 按文件生成路由,新增页面时要同时考虑返回关系、深链入口和找不到目标时的状态。先搭出首页、核心详情页与必要布局,运行类型检查后再启动开发服务器。

依赖 Expo 包时使用 npx expo install,让版本与当前 Expo SDK 保持兼容。每次增加能力都说明它需要什么系统权限、原生模块和配置。若新包超出 Expo Go 支持范围,就停下来切换 development build,不能靠网页预览假装真机已经可用。

页面先接本地确定数据,补齐加载、空结果、失败和重试。表单要处理键盘遮挡、提交中状态与重复点击,列表要考虑安全区域、滚动和较长文本。可见结果是连接 Metro 或 Expo 开发服务器的 Expo Go、development build、真机或模拟器客户端能够前进和返回,状态切换不会留下无法操作的页面。

数据接入时保留一个离线夹具或可控测试端点。网络请求要有取消和超时处理,页面卸载后不能继续写入旧状态。若应用需要登录,测试账号应与个人账号分开,令牌只放在系统允许的安全位置,截图前遮住个人资料。

用 Codex 和 Expo 做出可上机验收的 React Native 应用的三步关键操作与请求骨架示意图
图 2 · 把关键操作拆成三步,并给每一步留下可观察结果

在真机或模拟器完成一轮完整流程

先运行 npx expo start。使用 Expo Go 时在设备上打开项目,使用模拟器时确认目标运行时已经启动。development build 需要先构建并安装自己的客户端,本地 iOS 构建依赖 macOS 与 Xcode,本地 Android 构建依赖 Android Studio。云端 EAS 构建可减少本机原生工具需求,签名和账号条件仍需按目标平台准备。

按固定脚本验收首次启动、进入核心流程、触发一次空状态、完成一次成功、制造一个可恢复失败、返回起点和再次进入。再测试离线或慢网、系统返回、键盘、横竖屏策略和应用恢复。每个步骤记录设备型号或模拟器、系统版本、应用构建、动作和可见结果。

验收至少包含一次冷启动和一次从后台恢复。Android 要检查系统返回键,iOS 要检查手势返回与安全区域。涉及相机、定位或通知时,分别记录首次授权、拒绝和稍后重新开启后的表现。这些状态需要真机或匹配的模拟器能力,网页预览无法覆盖。

若只改 TypeScript 或 JavaScript,development build 通常可以继续连接开发服务器。安装含原生代码的库、修改应用配置或升级 Expo SDK 后,需要重新生成或构建原生应用。把这一条件写进项目说明,避免后来只重启打包器却一直看不到原生变化。

完成后运行项目已有的类型检查和测试,再从干净启动状态重走主流程。日志中若仍有未处理异常或重复警告,应记录来源和影响。验收包保留启动二维码或构建标识的截图,但不要包含签名文件、访问令牌或测试账号密码。

用 Codex 和 Expo 做出可上机验收的 React Native 应用的结果验收与交付证据清单示意图
图 3 · 用结果、检查与交付证据确认任务真的完成

风险与限制

模拟器无法完全代表相机、通知、蓝牙、性能、后台任务和真实网络。Expo Go 也不能验证所有原生依赖。至少要在目标平台的真实设备上做发布前检查。权限说明、隐私数据、商店签名和 EAS 费用属于独立发布条件,不能从一次开发运行推断已经满足。

交付清单

  1. Node、目标设备和原生工具条件已经记录
  2. Expo Go 与 development build 的选择有明确依据
  3. Expo Router 页面能完成一个核心流程
  4. 加载、空、失败、重试和返回状态可见
  5. 指定真机或模拟器完成逐步验收
  6. 原生依赖变化后的重建条件已经说明

参考

  1. OpenAI Expo 应用用例
  2. Expo 创建项目
  3. Expo 开发环境
  4. Expo development build
  5. Expo Router 介绍
  6. Expo Skills
  7. Expo MCP